码迷,mamicode.com
首页 > Web开发 > 详细

图片上传预览功能实现

时间:2016-04-15 19:50:43      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!