js实现图片实时预览
2024-08-26 22:21:42
注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html 转载请注明出处
<body>
上传图片: <input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">
</div>
</body>
</html>
<script type="text/javascript">
function PreviewImage(imgFile) {
var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
filextension = filextension.toLowerCase();
if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
imgFile.focus();
}
else {
var path;
if (document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = "";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path = window.URL.createObjectURL(imgFile.files[0]);
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";
// document.getElementById("img1").src = path;
}
}
}
</script>
最新文章
- 类型转换器(InitBinder 初始化绑定器)
- 对象映射工具AutoMapper介绍
- redis中使用java脚本实现分布式锁
- 多次快速点击相同button导致重复响应的问题
- 图书馆管理系统—NABCD模型竞争性需求分析
- windows下mysql远程访问慢
- keepalived的安装和使用
- Android 中断线程的处理
- WordPress Kernel Theme ‘upload-handler.php’任意文件上传漏洞
- 免费开源的android项目分享
- eclipse tomcat 网页404的一个小问题
- F - The Circumference of the Circle
- 人工智能搜索算法(深度优先、迭代加深、一致代价、A*搜索)
- 你所不知道的 CSS 滤镜技巧与细节
- python经典书籍推荐:python编码规范
- 自定义Log 写到文件中
- 团队作业:SRS文档-飞机大战
- 洛谷 P3155 [CQOI2009]叶子的染色 解题报告
- pythn os
- vue-cli webpack全局引入jquery