html5上传图片实时预览

最新推荐文章于 2021-12-28 17:25:24 发布

weixin_33810302

最新推荐文章于 2021-12-28 17:25:24 发布

阅读量235

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1581846/blog/852910

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近项目中客户提出需求，上传图片、或者修改图片时需要能够预览图片，防止图片上传错误。

由于功能原来已经做好，只有图片上传到服务器端了，然后统计img标签的url属性来获取已经上传了的图片进行查看，但没有做到实时预览的功能，

需要预览有两种解决办法：

一、在选择文件时，除非ajax请求直接上传到服务器，然后给img的url赋值

二、通过FileReader读取本地文件路径。

由于第一种方法需要和后台交换，没有保存又需要删除文件，所以不可行。

下面就介绍第二种实现方式。

FileReader作为文件API用于读取文件，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

脚本：

function preview(file){  
     var prevDiv = document.getElementById('photoDivId');  
     if (file.files && file.files[0]){ 
         if(window.FileReader) {  
            var fr = new FileReader();
         } else {  
            alert("Not supported by your browser!");  
         }
         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>';  
    }  
 }

html代码

<body>
<div id="photoDivId" >
<img  id="photoId" name="member.photo_path"  style="width:142px;height:198px;" />
</div>
<input type="file" accept="image/gif,image/jpeg,image/png" class="file-input"   name="photoFile" onchange="preview1(this)">
</body>

通过readAsDataURL方法去读取内容。

这样就可以实现图片上传实时预览功能了。

转载于:https://my.oschina.net/u/1581846/blog/852910