标签：
图片预览功能是在网站开发中非常常见的，以前图片预览是一个很简单的功能，只需要JS获得一下上传的路径，然后将路径设置为某一个img标签的src就可以了，但是现在很多浏览器出现安全方面的考虑，都不允许直接获得文件的路径，通过file的value值获得的路径都是带有fakepath，所以获得路径就变得困难，但是H5之后，可以通过JS的fileReader来实现文件的预览：代码如下：
JS处理代码：
<script type="text/javascript"> document.getElementById(‘file1‘).onchange=function(evt) { // 如果浏览器不支持FileReader，则不处理 if (!window.FileReader) { return; } var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match(‘image.*‘)) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // img 元素 document.getElementById(‘img1‘).src = e.target.result; }; })(f); reader.readAsDataURL(f); } } </script>
HTML标签很简单：需要一个file标签和一个img标签
<img id="img1" width="120" height="130" style="padding-top:10px"/> <input type="file" name="file" id="file1"/>
这样就实现了文件的预览功能。
标签：
原文地址：http://www.cnblogs.com/huajiezh/p/5396533.html
