图片上传，直接在网页中显示(支持IE，谷歌，火狐浏览器)-白红宇

图片上传，直接在网页中显示(支持IE，谷歌，火狐浏览器)

阅读量：4634 次

发布时间：2019-06-09

本文共 1572 字，大约阅读时间需要 5 分钟。

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

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>

<p>

</div>

</p>

</body>

</html>

转载于:https://www.cnblogs.com/loveLearning/p/3666645.html

你可能感兴趣的文章

easyUI样式之easyui-switchbutton

查看>>

在raspberry的jessie版系统上安装opencv3.0

查看>>

codeforces水题100道第二十七题 Codeforces Round #172 (Div. 2) A. Word Capitalization (strings)...

AngularJS $eval $parse

Notification和KVO有什么不同

查看>>

开源组件websocket-sharp中基于webapi的httpserver使用体验

查看>>

HDU 4135 Co-prime(容斥原理)

Probabilistic Graphical Models 1: Introduction

查看>>