jquery filereader 追加所有图像事件

Question

我正在使用这个简单的脚本来选择和预览多个图像 我想在所有图像预览完成后发出警报 但是在图像附加到 html 元素之前执行的警报 谁能知道如何解决这个问题？

这是一个用于测试的sn-p

$(document).ready(function() {


  if (window.File && window.FileList && window.FileReader) {
	    $("#files").change(function(event) {
			var files = this.files; 
			var i = 0,
			  len = files.length;
			(function readFile(n) {
			  var reader = new FileReader();
			  var f = files[n];
			  reader.onload = function(e) {
				
				$("<span class=\"pip\">" +
					"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/><br/>" +
					"name: "+ f.name +"<br>size: " + f.size
					+ "<span class=\"remove\">Remove image</span>" +
					"</span>").appendTo("#img");
				$(".remove").click(function(){
					$(this).parent(".pip").remove();
				});
				if (n < len -1) 
                 readFile(++n)
               else 
                 alert("all image displayed");
			  };
			  reader.readAsDataURL(f); // `f` : current `File` object
			  
			}(i)); 
			
			
		});
  } 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>
			<pre id="debug"></pre>
			<div id="img"></div>
			<div class="field" align="left">
			  <h3>Upload your images</h3>
			  <input type="file" id="files" name="files[]" multiple />
			  <div id="img"></div>
			</div>

Answer 1

您的代码会递归地遍历所有文件，为每个文件创建一个FileReader，并为每个FileReader 添加一个onload 回调。

这个onload 回调是异步的，因此JavaScript 引擎不会等待任何图像被加载并在遍历所有文件后运行下一条语句alert("all image displayed");。

您可以在if (n < len -1) readFile(++n) 中添加一条 else 语句，以便在加载最后一张图片后执行警报

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

当然，那你应该删除当前的alert("all image displayed");