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被浏览器去掉了文件路径分割线从而显示不出来

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。