télécharger plusieurs images dans la même séquence que l'entrée de l'utilisateur

Question

J'ai un téléchargement multiple pour les fichiers image, et le problème que je rencontrais était que les images apparaissaient dans une séquence différente en tant qu'entrée de l'utilisateur. Par exemple, l'utilisateur sélectionne Img1, Img2, Img3, Img4. La séquence qui apparaît peut être Img2, Img4, Img3, Img1.

Cela provoque un problème car je dois les lier à un champ de texte (description de l'image), et chaque champ de texte doit correspondre à la bonne image. Je l'ai fait quelques recherches et découvert que je peux utiliser ce code ici pour vous assurer qu'il est en cours de téléchargement dans la même séquence:

html

<input id="uploadfiles" multiple="multiple" name="photos" type="file"> 

javascript

$("#uploadfiles").change(function(){ 
    imgpreview(document.getElementById('uploadfiles').files); 
}); 

function imgpreview(files) { 
    var count = 0; 
    for (var i = 0, f; f = files[i]; i++) { 
     (function() { 
      var div = $("<div></div>"); 
      var reader = new FileReader(); 
      $(".display").append(div);  

      reader.onload = function(e) { 
       div.append("<img id='photocount" + count + "' src='" + e.target.result + "' style='height:40px;width:auto;'></img>"); 
       count++; 
      }; 

      reader.readAsDataURL(f); 
     }()); 
    } 
} 

Il est également disponible en violon ici: https://jsfiddle.net/L3d1L9t3/1/

Ce code javascript garantit que les images apparaissent en séquence. Cependant, les identifiants des images ne sont toujours pas en ordre. Par exemple, si 4 images sont téléchargées, les identifiants doivent être respectivement photocount0, photocount1, photocount2, photocount3. Mais ce n'est pas le cas quand j'inspecte l'élément sur chacune des images.

Comment puis-je m'assurer que le "compte" est également en séquence? Ceci est important car je dois faire correspondre le compte au champ de texte (description de l'image) ainsi que "image 1" et "image description 1", "image 2" et "image description 2" et ainsi de suite]

Answer 1

Utilisez URL.createObjectURL(file) à la place, il est à la fois plus rapide et plus facile, car il est synchro - vous ne devez pas encoder/décoder en arrière et fort à/de base64 puis

$("#uploadfiles").change(function() { 
    // imgpreview(document.getElementById('uploadfiles').files); <-- not needed 
    imgpreview(this.files) 
}) 

function imgpreview(files) { 
    var url, div, len = files.length 
    var $display = $(".display") 

    for (var i = 0; i < len; i++) { 
    url = URL.createObjectURL(files[i]) 
    div = $('<div>') 
    $display.append(div) 
    div.append("<img id='photocount" + i + "' src=" + url + " style='height:40px;width:auto'>") 
    } 
}