logo
16.09.2019 14:58
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++;
		});
		}
	});
16.09.2019 15:23
2
a ked v tom cykle zmenis "this" za "tempImages[j]" sa co stane?
16.09.2019 15:30
3
To je porad stejny proces. Uz jsem tam mel obe varianty.
16.09.2019 15:33
4
a len taka mala kontrola otazka - ma input file atribut multiple ?
16.09.2019 15:47
5
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.
16.09.2019 15:47
6
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
16.09.2019 16:24
7
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.
16.09.2019 16:44
8
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.
16.09.2019 16:49
9
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ý.
16.09.2019 17:28
10
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.
16.09.2019 17:30
11
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.