图片上传预览功能实现

图片预览功能是在网站开发中非常常见的，以前图片预览是一个很简单的功能，只需要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"/>

这样就实现了文件的预览功能。