html5上传图片实时预览

时间 2019-12-06

标签 html5 html 上传图片实时预览栏目 HTML5 繁體版

原文原文链接

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

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

须要预览有两种解决办法：服务器

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

2、经过FileReader读取本地文件路径。url

因为第一种方法须要和后台交换，没有保存又须要删除文件，因此不可行。spa

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

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

脚本：

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代码htm

<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方法去读取内容。接口

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