實現原理：通過createObjectURL 創建一個臨時指向某地址的二進制對象。

過程：點擊觸發隱藏的 input file 的點擊事件，使用createObjectURL讀取 file，創建一個Jquery 圖片對象，url等於二進制對象。

前端代碼：

js:　　
$(function () {
$(‘[type=file]‘).change(function (e) {
var file = e.target.files[0]
preview(file, this);
})
});

　　　//添加圖片觸發隱藏的 file input
function upLoadImage(obj) {
return $(obj).next().click();
}



//預覽文件圖片
function preview(file, obj) {
//瀏覽器緩存一張圖片
var img = new Image(), url = img.src = URL.createObjectURL(file);
var $img = $(img);
img.onload = function () {
URL.revokeObjectURL(url)

var $parentBox = $(obj).parent().find(".imgBox");
alert(0);
$parentBox.html("");

$parentBox.css("width", "64");
$parentBox.css("height", "64");
$parentBox.append($img)
//$(‘#preview‘).empty().append($img)
}
}

html:

　　 <td>
<div class="upload-img" style="float: left; margin-right: 25px">
<a href="javascript:void(0);" onclick="upLoadImage(this)" class="upload-hotel-a">
<div class="imgBox">
<img src="../../images/upload.png">
</div>
</a>
<input type="file" style="display: none" />
<br />
<a onclick="deleteimg(this)" class="button icon trash DeleteTd">刪除</a>
<input type="hidden" value="">
</div>
</td>

通過createObjectURL實現圖片預覽