Как загружать изображения по порядку?

363

18 марта 2018, 23:00

Привет) при загрузке изображений формируется массив, но отображается он почему то рандомно, что-не так? вот код и скрин:

var uploadImages = (function () { 
 
    function uploadImages(uploadBtn, outputImages) { 
 
        var btn = document.getElementById(uploadBtn), 
            output = document.getElementById(outputImages), 
            testInput = document.getElementsByName('testUpload')[0], 
            file, 
            i, 
            iImage; 
 
     
        var maxArr = []; 
 
        function handleUpload(evt) { 
            iImage = evt.target.files; 
 
            for (i = 0; i < iImage.length; i++) { 
                file = iImage[i]; 
 
                 console.log(file); 
                //   uploadArray = unique(uploadArray); 
 
 
                var fileReviu = new FileReader(); 
 
                fileReviu.onload = (function (iFile) { 
                    return function (e) { 
                        if (document.getElementById(escape(iFile.name)) == null){ 
                        var div = document.createElement('div'); 
                        // div.id = escape(iFile.name); 
                        div.innerHTML = ['<img class="img-thumbnail" ', ' src="', e.target.result, '" title="', escape(iFile.name), '"/>'].join(''); 
                        // console.log(div.innerHTML); 
                        document.getElementById('outputMulti').insertBefore(div, null); 
                      } 
                    } 
                })(file); 
 
                fileReviu.readAsDataURL(file); 
 
        } 
 
        } 
 
        btn.addEventListener('change', handleUpload, false); 
    } 
    return uploadImages; 
})(); 
 
 
uploadImages('fileMulti', 'outputMulti');

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>testComponents</title> 
  <!--meta--> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta name="Copyright" content=""> 
  <meta name="keywords" content=""> 
  <meta name="description" content=""> 
  <!--css--> 
 
  <style> 
    .img-thumbnail { 
      height: 75px; 
      border: 1px solid #000; 
      margin: 10px 5px 0 0; 
    } 
  </style> 
 
</head> 
 
<body> 
 
 
  <div class="container"> 
 
    <div class="row"> 
      <label>Мультизагрузка файлов:</label> 
      <input type="hiden" id="testUpload" name="testUpload" value="666"> 
      <input type="file" id="fileMulti" name="fileMulti[]" multiple /> 
    </div> 
    <div class="row"> 
      <span id="outputMulti"></span> 
    </div> 
  </div> 
 
 
</body> 
 
</html>

Смотреть на JSFiddle

Answer 1

Ну да. Имена файлов вы читаете по порядку и записываете их в консоль. А потом сразу ставите файлы на загрузку и не дожидаясь ее окончания обрабатываете остальные файлы. Ну так какой файл быстрее загрузится тот первым в превью и добавиться. Можно сделать так. Сразу создаём div под картинки. Для картинок в функцию загрузки передаем ещё и созданный Div куда эту картинку потом отобразить. Теперь они будут по порядку. Только вот порядок определяет ОС и он как правило алфавитный, а не тот в котором вы выделяли файлы. По хорошему нужно делать еще ручную сортировку после загрузки, например с помощью drag and drop.

var uploadImages = (function () { 
 
    function uploadImages(uploadBtn, outputImages) { 
 
        var btn = document.getElementById(uploadBtn), 
            output = document.getElementById(outputImages), 
            testInput = document.getElementsByName('testUpload')[0], 
            file, 
            i, 
            iImage; 
 
     
        var maxArr = []; 
 
        function handleUpload(evt) { 
            iImage = evt.target.files; 
 
            for (i = 0; i < iImage.length; i++) { 
                file = iImage[i]; 
 
                 console.log(file); 
                //   uploadArray = unique(uploadArray); 
                var newdiv = document.createElement('div'); 
                // div.id = escape(iFile.name); 
                // div.innerHTML = ['<img class="img-thumbnail" ', ' src="', e.target.result, '" title="', escape(iFile.name), '"/>'].join(''); 
                document.getElementById('outputMulti').insertBefore(newdiv, null); 
 
 
                var fileReviu = new FileReader(); 
 
                fileReviu.onload = (function (iFile,iFileDiv) { 
                    return function (e) { 
                        //if (document.getElementById(escape(iFile.name)) == null){ 
                        //var div = document.createElement('div'); 
                        // div.id = escape(iFile.name); 
                        iFileDiv.innerHTML = ['<img class="img-thumbnail" ', ' src="', e.target.result, '" title="', escape(iFile.name), '"/>'].join(''); 
                        // console.log(div.innerHTML); 
                        //document.getElementById('outputMulti').insertBefore(div, null); 
                        //} 
                    } 
                })(file, newdiv); 
 
                fileReviu.readAsDataURL(file,newdiv); 
 
            } 
 
        } 
 
        btn.addEventListener('change', handleUpload, false); 
    } 
    return uploadImages; 
})(); 
 
 
uploadImages('fileMulti', 'outputMulti');

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>testComponents</title> 
  <!--meta--> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta name="Copyright" content=""> 
  <meta name="keywords" content=""> 
  <meta name="description" content=""> 
  <!--css--> 
 
  <style> 
    .img-thumbnail { 
      height: 75px; 
      border: 1px solid #000; 
      margin: 10px 5px 0 0; 
    } 
  </style> 
 
</head> 
 
<body> 
 
 
  <div class="container"> 
 
    <div class="row"> 
      <label>Мультизагрузка файлов:</label> 
      <input type="hiden" id="testUpload" name="testUpload" value="666"> 
      <input type="file" id="fileMulti" name="fileMulti[]" multiple /> 
    </div> 
    <div class="row"> 
      <span id="outputMulti"></span> 
    </div> 
  </div> 
 
 
</body> 
 
</html>