Problém s uploadem souborů přes JS

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++;
		});
		}
	});

a ked v tom cykle zmenis "this" za "tempImages[j]" sa co stane?

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

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

Původně odeslal ne ↪

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

Ano, urcite ma. Dialog pro vyber souboru umoznuje oznaceni klidne peti souboru.

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

Původně odeslal Miroslav Foltýn ↪

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.

Původně odeslal Miroslav Foltýn ↪

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.

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ý.

Původně odeslal Miroslav Foltýn ↪

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.

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.