图片上传预览功能实现

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

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