本地預覽圖片html和js例子

時間 2019-11-26

標籤本地預覽圖片 html 例子欄目 HTML 简体版

原文原文鏈接

本地預覽圖片html和js例子，直接上代碼吧。

<!DOCTYPE html>

<head>

<title>測試本地圖片預覽</title>

</head>

<body>

<div>

</div>

</body>

</html>

function previewFunc()

{

document.getElementById("upload_img").click();

}

//值改變的話

document.getElementById("upload_img").onchange = function () {

var sender = this;

if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {

alert('圖片格式無效！');

return false;

}

var objPreviewImg = document.getElementById('preview_img');

var objPreviewDiv = document.getElementById('preview_div');

if (navigator.userAgent.indexOf("MSIE") > -1) {

//IE瀏覽器的話

try {

objPreviewImg.src = createFileObj(this.files[0]);

}

catch (e) {

//ie7中不兼容出錯跳到這裏

this.select(); //選擇的時候

top.parent.document.body.focus(); //若是要嵌套到iframe中進行顯示的話，須要加這個將焦點聚到iframe裏面

this.blur(); //必需要加這個

var src = document.selection.createRange().text; //IE 11中改成以下:document.selection ---》 window.getSelection

document.selection.empty();

objPreviewImg.style.display = "none"; //隱藏img控件

objPreviewDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;

}

} else {

//chrome firfox均可以

objPreviewImg.src = createFileObj(this.files[0]);

}

function createFileObj(filePath)

{

var url = null;

if (window.createObjectURL != undefined) {

url = window.createObjectURL(filePath);

} else if (window.URL != undefined) {

url = window.URL.createObjectURL(filePath);

} else if (window.webkitURL != undefined) {

url = window.webkitURL.createObjectURL(filePath);

}

else {

}

return url;

}

</script>

//----------------------------------------------------------------------

以上須要注意的地方是

注意不能用display:none的樣式進行隱藏，不然ie7中不管如何都不能獲取到對應value值。

以上代碼嵌套到iframe中也是能夠進行預覽的，若是本身想封裝組件的朋友能夠本身再封裝一下，或者用jQuery重寫一下就OK了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。