圖片上傳，直接在網頁中顯示(支持IE，谷歌，火狐瀏覽器)

時間 2019-11-07

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script>
function setImagePreview() {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
/*火狐下，直接設img屬性*/
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '120px';
/*imgObjPreview.src = docObj.files[0].getAsDataURL();*/
/*火狐7以上版本不能用上面的getAsDataURL()方式獲取，須要一下方式*/
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
/*IE下，使用濾鏡*/
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
/*必須設置初始大小*/
localImagId.style.width = "150px";
localImagId.style.height = "120px";
/*圖片異常的捕捉，防止用戶修改後綴來僞造圖片*/
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上傳的圖片格式不正確，請從新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay: none" />
</div>
</p>
</body>
</html>javascript