使用jQuery查看文件上传

Question

之前，我想显示照片选择使用输入文件对话框但是这个代码似乎不执行和不显示任何错误：

var Box = $('.UploadBox'); 
var Image = $('.Image'); 
var Input = $('.UloadBox .File'); 
Box.hide() 
$('.Photo .Upload').click(function() { 
    Box.show(); 
    Input.change(function() { 
     var File = this.files[0]; 
     var Reader = new FileReader(); 
     Reader.onload = function (e) { 
      Image.attr('src', e.target.result); 
     }; 
     Reader.readAsDataURL(this.files[0]); 
    }); 
}); 

Answer 1

这是我使用的解决方案。它处理多个图像的上传。如果您只希望提供一次上传一张图片的选项，那么您只需更改输入元素的HTML即可。对于这些输入中的任何一个，我提供的JavaScript以相同的执行结果运行结果。那么它就成了你限制文件上传到一个或多个文件的问题。

对于多个文件：<input type="file" id="files" name="files[]" multiple />
对于一个单一的文件：<input type="file" id="files" name="file" />

var numDocuments = 0; 
 
var numDocumentsProcessed = 0; 
 

 
function processFiles() { 
 
    numDocuments = files.length; 
 
    for (var i = 0, f; f = files[i]; i++) { 
 
    var fileReader = new FileReader(); 
 
    fileReader.onloadend = (function (file) { 
 
     return function (evt) { 
 
     doSomethingWithFile(evt, file) 
 
     } 
 
    })(f); 
 
    fileReader.readAsDataURL(f); 
 
    } 
 
} 
 

 
function onFilesSelected(event) { 
 
    files = event.target.files; // FileList object 
 
    processFiles(); 
 
} 
 

 
function doSomethingWithFile(evt, file) { 
 
    var key = file.name; 
 
    var value = evt.target.result; 
 
    var container = document.getElementById('image-container'); 
 
    var image = document.createElement('img'); 
 
    image.src = evt.target.result; 
 
    container.appendChild(image); 
 
    if (++numDocumentsProcessed === numDocuments) { 
 
    //final steps after final image processed 
 
    } 
 
} 
 

 
document.getElementById('files').addEventListener('change', onFilesSelected, false);

<input type="file" id="files" name="files[]" multiple /> 
 
<br> 
 
<div id="image-container"></div>