嘗試顯示輸入文件的圖像onChange事件

Question

我試圖在直接在輸入文件的onchange事件上選擇圖像后顯示圖像，但我想出了它在所有瀏覽器中是如何完成的，但我停下了Safari嘗試獲取

inputFile.value屬性，但是即使繞過該問題，它inputFile.value返回我需要幫助的偽造路徑，但我不需要發回郵件。

問候

Answer 1

假設您的輸入和圖像如下

<img id="PreviewImage" src="" alt="?" style="height:100px;"  />
<input id="ImageFileUpload" onchange="readURL(this);" type="file" runat="server"/>

function readURL(input) {
if (input.files && input.files[0]) {//Check if input has files.
var reader = new FileReader(); //Initialize FileReader.

reader.onload = function (e) {
$('#PreviewImage').attr('src', e.target.result);
$("#PreviewImage").resizable({ aspectRatio: true, maxHeight: 300 });
};
reader.readAsDataURL(input.files[0]);
} 
else {
$('#PreviewImage').attr('src', "#");
}
}