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.