有些前端攻城师可能都需要有这个图片上传功能，于是我就整理出来了这么一个文档（仅供参考）。
在需要上传图片的应用程序中，用户在选择了图片之后，当然希望图片马上就显示在屏幕上。
但是此时图片还位于用户的电脑上，并未传至服务器，此时可以将<img>标签的 src属性设为 file:///? ?来指向本场的图片，本来这样应该能够解决问题。但是IE出于安全考虑，不允许<img>的src属性指定为本地的一个文件位置。于是，在IE中只能使用滤镜来实现。只有这方面熟悉的人才写的出这个代码！
在 Firefox中可以将 src属性指向?本地文件，但是要使用upload.files[0].getAsDataURL() 来获取文件名！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传功能</title>
<script type="text/javascript">
function checkPic() {
var picPath = document.getElementById("picPath").value;
var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase();
if (type == "jpg" || type == "bmp" || type == "gif" || type == "png") {
return true;
}else{
alert("请上传正确的图片格式");
return false
};
//图片预览
function PreviewImage(divImage, upload, width, height) {
if (checkPic()) {
try {
var imgPath; //图片路径
var Browser_Agent = navigator.userAgent;
//判断浏览器的类型
if (Browser_Agent.indexOf("Firefox") != -1) {
//火狐浏览器
//getAsDataURL在Firefox7.0 无法预览本地图片，这里需要修改
imgPath = upload.files[0].getAsDataURL();
document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>";
} else {
//IE浏览器 ie9 必须在兼容模式下才能显示预览图片
var Preview = document.getElementById(divImage);
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = width;
Preview.style.height = height;
}
} catch (e) {
alert("请上传正确的图片格式");
}
}
};
</script>
</head>
<body>
<input type="file" id="picPath" name="doc" onchange="PreviewImage('Preview',this,120,120);" />
<div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"></div>
</body>
</html>
Comments | NOTHING