使用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>