jquery Filereader alle Bild Ereignis anhängen

Question

ich dieses einfache Skript bin mit mehrere Bild auswählen und eine Vorschau möchte ich, nachdem alle Bildvorschau alarmieren komplette aber Vergangenheitsbild ausgeführt Benachrichtigung an html-Element angehängt kann jemand eine Idee hat, wie um das zu beheben?

hier ist ein Ausschnitt für

Testen von Code

$(document).ready(function() { 
 

 

 
    if (window.File && window.FileList && window.FileReader) { 
 
\t  $("#files").change(function(event) { 
 
\t \t \t var files = this.files; 
 
\t \t \t var i = 0, 
 
\t \t \t len = files.length; 
 
\t \t \t (function readFile(n) { 
 
\t \t \t var reader = new FileReader(); 
 
\t \t \t var f = files[n]; 
 
\t \t \t reader.onload = function(e) { 
 
\t \t \t \t 
 
\t \t \t \t $("<span class=\"pip\">" + 
 
\t \t \t \t \t "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/><br/>" + 
 
\t \t \t \t \t "name: "+ f.name +"<br>size: " + f.size 
 
\t \t \t \t \t + "<span class=\"remove\">Remove image</span>" + 
 
\t \t \t \t \t "</span>").appendTo("#img"); 
 
\t \t \t \t $(".remove").click(function(){ 
 
\t \t \t \t \t $(this).parent(".pip").remove(); 
 
\t \t \t \t }); 
 
\t \t \t \t if (n < len -1) 
 
       readFile(++n) 
 
       else 
 
       alert("all image displayed"); 
 
\t \t \t }; 
 
\t \t \t reader.readAsDataURL(f); // `f` : current `File` object 
 
\t \t \t 
 
\t \t \t }(i)); 
 
\t \t \t 
 
\t \t \t 
 
\t \t }); 
 
    } else { 
 
    alert("Your browser doesn't support to File API") 
 
    } 
 

 

 
});

input[type="file"] { 
 
    display: block; 
 
} 
 
.imageThumb { 
 
    max-height: 75px; 
 
    border: 2px solid; 
 
    padding: 1px; 
 
    cursor: pointer; 
 
} 
 
.pip { 
 
    display: inline-block; 
 
    margin: 10px 10px 0 0; 
 
} 
 
.remove { 
 
    display: block; 
 
    background: #444; 
 
    border: 1px solid black; 
 
    color: white; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.remove:hover { 
 
    background: white; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<p id="msg"></p> 
 
\t \t \t <pre id="debug"></pre> 
 
\t \t \t <div id="img"></div> 
 
\t \t \t <div class="field" align="left"> 
 
\t \t \t <h3>Upload your images</h3> 
 
\t \t \t <input type="file" id="files" name="files[]" multiple /> 
 
\t \t \t <div id="img"></div> 
 
\t \t \t </div>

Answer 1

Ihr Stück geht alles rekursiv durch die Dateien, erstellt eine FileReader für jeden von ihnen und fügt einen onload Rückruf an jedem FileReader.

Dieser onload Rückruf asynchron damit das JavaScript-Engine für jedes Bild wartet nicht, die nächste Anweisung geladen und läuft werden, alert("all image displayed");, nachdem sie durch alle Dateien gegangen.

Sie könnten eine andere Aussage in if (n < len -1) readFile(++n) so die Warnung nach dem letzten Bild ausgeführt würde hinzufügen, wird

if (n < len -1) { 
    readFile(++n); 
} else { 
    alert("all image displayed"); 
} 

Natürlich geladen, dann sollten Sie die aktuelle alert("all image displayed");