js图片上传前预览功能（兼容所有浏览器）
更新时间：2016年08月24日 16:22:33 作者：chua1989
这篇文章主要为大家详细介绍了js图片上传前预览功能，兼容所有浏览器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview,
.img,
img {
width: 200px;
height: 200px;
}
#preview {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file) {
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
TextArea设置MaxLength属性最大输入值的js代码
TextArea中限制最大输入长度,实现的方法种种，我们不在一一介绍，今天本文推荐一种简单实用的方法，需要的朋友可以参考下2012-12-12
javascript之解决IE下不渲染的bug...2007-06-06
这篇文章主要介绍了JS实现移动端触屏拖拽功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了深入浅出理解JavaScript闭包的功能与用法,结合实例形式从变量、函数的内部属性与作用域链分析了javascript闭包的相关概念、功能与使用技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了ES6中let和const命令的相关资料，非常不错，具有参考借鉴价值，对es6 let const相关知识感兴趣的朋友一起看下吧2016-08-08
这篇文章主要给大家总结介绍了关于JavaScript类型相关的常用操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
这篇文章主要为大家详细介绍了JS实现京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
创建iframe对象，添加load事件， 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。2011-03-03
JS文本框不能输入空格验证方法，需要的朋友可以参考一下2013-03-03
这里列出了一些JS重要知识点（不全面，但自己感觉很重要）。彻底理解并掌握这些知识点，对于每个想要深入学习JS的朋友应该都是必须的2011-11-11
最新评论