Vyvíjej vlastní projekty a expanduj do zahraničí! Přijď na 14. Affiliate konferenci v Praze
Zobrazují se odpovědi 1 až 11 z 11

Problém s uploadem souborů přes JS

  1. Ahoj,

    lámu si hlavu s jedním upload skriptem na upravovaném webu. Nefungoval správně, tak jsem si tam dal nějaké výpisy do konsole apod. Nyní mi vrtá hlavou, proč když se nahraje pomocí input[type="file"] několik obrázků, tak v cyklu for s "j" (označil jsem jako "podivné místo") se mi vypíše při každém průchodu vždy jen vlastnost posledního nahrávaného obrázku.

    Přitom řádek s výpisem this je v pořádku, protože to vypíše vždy jinou URL k souboru. Ovšem v čítači "j" už je chyba a stejně tak informace o rozměru patří vždy jen poslednímu obrázku.

    Chtěl bych to vyřešit úpravou tohoto, než přepisovat upload souborů do jiné technologie.

    Děkuji moc za každou radu. Zkrátka cyklus s "j" je vždy asi o dost rychlejší než událost .addEventListener a ta pak načítá jen poslední obrázek, nevím...

    Kód:
        var apiFileURL = 'https://domain.cz/development/api/files/';
    
        $(document).on('change', '#files_1', function() {
    
            var data = new FormData();
    
            var formData = {
                token: $('input[name="token"]').val(),
                type: 'file'
            };
    
            data.append('formData', JSON.stringify(formData));
    
            var files = document.getElementById('files_1').files;
            var imagesLoaded = 0;
            var tempImages = [];
    
            for (var i = 0; i < files.length; i++) {       	
            	var height = 0;
            	var width = 0;
    		    
                var img = new Image();
                img.src = window.URL.createObjectURL(files[imagesLoaded]);
                tempImages.push(img); 
    	}
    
           //PODIVNÉ MÍSTO
    	for (var j = 0; j < files.length; j++) {
    
    		tempImages[j].addEventListener( "load", function() {
    		    console.log(this);
         		    console.log('obr:' + j);
    		    console.log('rozmery:' + this.naturalWidth + 'x' + this.naturalHeight);
    		    console.log('--------------------');
    
                   	    imagesLoaded++;
    		});
    		}
    	});
    Naposledy upravil musil.david : 16.09.2019 v 15:47

  2. Co se právě děje na Webtrhu?
  3. a ked v tom cykle zmenis "this" za "tempImages[j]" sa co stane?

  4. To je porad stejny proces. Uz jsem tam mel obe varianty.

  5. a len taka mala kontrola otazka - ma input file atribut multiple ?

  6. Citace Původně odeslal ne Zobrazit příspěvek
    a len taka mala kontrola otazka - ma input file atribut multiple ?
    Ano, urcite ma. Dialog pro vyber souboru umoznuje oznaceni klidne peti souboru.

  7. To je klasický problém lidí, co začínají s JS.

    "var" vám hoistuje proměnnou k funkci, ne k "for" bloku. Callbacky pro event všechny referencují onu proměnnou z bloku funkce výše, a když se provádějí, je hodnota již poslední.

    Příklad s vysvětlením:
    JS Bin - Collaborative JavaScript Debugging

  8. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    To je klasický problém lidí, co začínají s JS.

    "var" vám hoistuje proměnnou k funkci, ne k "for" bloku. Callbacky pro event všechny referencují onu proměnnou z bloku funkce výše, a když se provádějí, je hodnota již poslední.

    Příklad s vysvětlením:
    JS Bin - Collaborative JavaScript Debugging
    Díky moc, vyzkoumám.

  9. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    To je klasický problém lidí, co začínají s JS.

    "var" vám hoistuje proměnnou k funkci, ne k "for" bloku. Callbacky pro event všechny referencují onu proměnnou z bloku funkce výše, a když se provádějí, je hodnota již poslední.

    Příklad s vysvětlením:
    JS Bin - Collaborative JavaScript Debugging
    Použil jsem tedy v cyklu s "j" let místo var. Výsledek tedy je, že console.log('obr:' + j) už opravdu vypisuje postupně vzrůstající hodnotu a nikoli tu poslední. Ovšem problém s výpisem rozměrů obrázků tu je stále.

    tempImages[j] nebo this má stále tu samou hodnotu a nemění se.

  10. Jestli kód netranspilujete, tak tím, že jste tam "jen tak" napsal "let", tak byste si měl být vědom toho, že vám to nebude fungovat v IE11 a z jiného důvodu ve starších verzích IE. https://caniuse.com/#search=let

    ---------- Příspěvek doplněn 16.09.2019 v 16:55 ----------

    Co se týče velikosti obrázků... nebude to tím, že mají opravdu všechny stejné rozměry?

    ... Samozřejmě, pořád tam vkládáte do pole ten samý.

  11. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    Jestli kód netranspilujete, tak tím, že jste tam "jen tak" napsal "let", tak byste si měl být vědom toho, že vám to nebude fungovat v IE11 a z jiného důvodu ve starších verzích IE. https://caniuse.com/#search=let

    ---------- Příspěvek doplněn 16.09.2019 v 16:55 ----------

    Co se týče velikosti obrázků... nebude to tím, že mají opravdu všechny stejné rozměry?

    ... Samozřejmě, pořád tam vkládáte do pole ten samý.
    Jasně, už to vidím také... vkládal jsem s indexem imagesLoaded, což byla pořád 0. Moc díky.

    Tu nefunkčnost s IE podle mě zvládnu vyřešit. Díky moc Miroslave.

  12. Myslím, že takových typo mají všichni programátoři za sebou habaděj. Jinak pro debugování se někdy hodí "debugger;", tak zkoušejte i to.

Hostujeme u Server powered by TELE3