您的位置：首页 > 其它

图片预览

2015-07-27 10:19 344 查看

两种方法，推荐第二种。

1.自动上传图片，然后在指定img标签上读出上传上的服务器图片内容。具体读取方法看上一篇文章。

2.纯前端的图片预览，不用立即上传图片。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>

<body>

<img id="imgPreview"/>
<p>请选择一个图片进行预览：<input type="file" size="20" onchange="javascript :PreviewImg(this);" /></p>

<script language="javascript" type="text/javascript">
function PreviewImg(imgFile){
var imgPreview = document.getElementById("imgPreview");

if (imgPreview.filters){ //IE5.5~9使用滤镜 这个用div类标签都可以
imgPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgPreview.style.width = "180px";
imgPreview.style.height = "160px";
imgPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
}else{ // 其他浏览器和IE10+（不支持滤镜）使用window.URL.createObjectURL方法 直接获取到所指定文件的完整内容. 这个只能用img标签
imgPreview.style.width = "180px";
imgPreview.style.height = "160px"
imgPreview.src = window[window.webkitURL ? 'webkitURL' : 'URL'].createObjectURL(imgFile.files[0]);
}
}
</script>
</body>
</html>

本文参考来源:http://www.cnblogs.com/fsjohnhuang/p/3925827.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航