多个文件上传并使用文件阅读器进行预览

 window.preview = function (input){ if(input.files && input.files[0]) { var reader = new FileReader(); reader.readAsDataURL(input.files[0]); reader.onload = function(e){ $("#previewImg").append(""); } } } 

我有一个使用文件阅读器预览图像的function，它在单个文件中工作正常。

但是我尝试实现多个文件。

我的问题是如何通过文件阅读器获取输入文件数组，循环文件并附加img

Answer 1

Javascript解决方案 小提琴演示

纯JavaScript：

 function handleFileSelect(event) { //Check File API support if (window.File && window.FileList && window.FileReader) { var files = event.target.files; //FileList object var output = document.getElementById("result"); for (var i = 0; i < files.length; i++) { var file = files[i]; //Only pics if (!file.type.match('image')) continue; var picReader = new FileReader(); picReader.addEventListener("load", function (event) { var picFile = event.target; var div = document.createElement("div"); div.innerHTML = ""; output.insertBefore(div, null); }); //Read the image picReader.readAsDataURL(file); } } else { console.log("Your browser does not support File API"); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); 

---

jQuery解决方案

jQuery文件输入图像预览在上传之前

jQuery的：

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#image_upload_preview').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#inputFile").change(function () { readURL(this); }); 

Answer 2

工作小提琴
使用Javascript

 function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function (theFile) { return function (e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = [''].join(''); document.getElementById('previewImg').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); 

有关此答案的文件API和参考帮助的更多详细信息……

---

使用您的代码 工作小提琴
HTML

使用Javascript

 window.preview = function (input) { if (input.files && input.files[0]) { $(input.files).each(function () { var reader = new FileReader(); reader.readAsDataURL(this); reader.onload = function (e) { $("#previewImg").append(""); } }); } } 

Answer 3

使用Jquery和DataURL进行Muliple文件预览