Der Dateiname kann vor dem Hochladen mehrerer Bilder in jQuery nicht gedruckt werden.

Question

Ich versuche, Bildvorschauen und ihre Namen vor dem Hochladen zu erhalten. Aber kann nicht den richtigen Namen für jedes einzelne Bild drucken. Ich habe versucht,

event.target.name die ‚undefined‘ und file.name gibt, die für alle übrigen Bilder Name des ersten Bildes zurückgibt. Jede Hilfe wäre willkommen.

<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple> 
<div id="img-wrapper"></div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $("#image-upload").change(function(){    
     var files = $(this)[0].files; 

     for(var i = 0; i< files.length; i++) { 
      var file = files[i];     
      var reader = new FileReader();     
      reader.onload = function(event){      
       var img = event.target.result; 

       console.log(event.target.name); //prints 'undefined' 
       console.log(file.name);   //prints 1st image's name for all images 

       $('#img-wrapper').append("<img class='thumbnail' src='" + img + "'" + 
         "title='" + file.name + "'/>"); 

      }; 

      reader.readAsDataURL(file); 
     }        

    }); 
</script> 

Answer 1

event.target.name ist nicht definiert, da das Ziel der Veranstaltung das FileReader Objekt ist, nicht die Datei:

EXAMPLE

$("#image-upload").change(function() { 
    $("#img-wrapper").empty(); 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     // Give the reader a name 
     reader.name = 'Reader #' + i; 

     reader.onload = function(event) { 
      // Append the reader's name to the output 
      $("#img-wrapper").append('<div>' + event.target.name + '<div>'); 
     }; 
    }; 

    reader.readAsDataURL(file); 
}); 

In Bezug auf Ihre Dateinamen Problem, das FileReader asynchron ist. From MDN:

Der Filereader-Objekt können Web-Anwendungen asynchron den Inhalt von Dateien (oder Rohdatenpuffer) lesen gespeichert auf dem Computer des Benutzers, Datei oder Blob-Objekte mit Hilfe der Datei oder Daten zu spezifizieren, zu lesen. Diese

bedeutet, dass Ihre for-Schleife alle seine Iterationen abgeschlossen ist, bevor die onload Rückrufe ausgelöst werden und file wird immer das letzte Element darstellen, die in der Schleife zu sehen war. Wenn die onload-Funktionen ausgelöst werden, haben sie alle das richtige Ergebnis (Bild), weil Sie das Ereignisobjekt verwenden, aber alle verwenden dasselbe file.

EXAMPLE

$("#image-upload").change(function(){    
    var files = $(this)[0].files; 

    for(var i = 0; i< files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     reader.name = 'Reader #' 
     reader._i = i; 

     $('#img-wrapper').append("<div>LOOP #" + i + "</div>"); 

     reader.onload = function(event) { 
      var img = event.target.result; 
      $('#img-wrapper').append("<div>READER #" + this._i +"</div>"); 

     }; 

     reader.readAsDataURL(file); 
    }        

}); 

Sie werden Ihren Code müssen restrukturieren zu können, tun, was Sie tun möchten.

Auf den zweiten Gedanken, müssen Sie möglicherweise nicht viel von etwas umstrukturieren. Sie können die onload Funktion für jeden Leser binden und in den Namen der Datei übergeben:

EXAMPLE

$("#image-upload").change(function() { 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     // Note that parameters are reordered due to binding below 
     reader.onload = (function(name, event) { 
     var img = event.target.result; 
     $('#img-wrapper').append(
      "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 
     }).bind(reader, file.name); 

     reader.readAsDataURL(file); 
    } 
});