js method to implement preview of uploaded images

Javascript local operation of image preview

Early browsers cannot process local images as page elements. To achieve image preview, you need to upload the image to the server first, and then obtain it from the server for preview

Modern browser functions It is becoming more and more comprehensive, so it can realize local processing of some data Chrome MsEdge (ie11) Firefox

html in the picture above

<tr>
<td>缩略图</td>
<td>
　　<a href="javascript::void(0)" class="fileBtn">
　　选择文件
　　<input type="file" id="file_pic">
　　</a>
</td>
</tr>
<tr>
<td></td>
<td><img  id="file_view"   style="max-width:90%" alt="js method to implement preview of uploaded images" ></td>
</tr>

// 下面用于图片上传预览功能 objc : { file, pic, width }
  
yqUI.setImagePreview = function(objc) {
  
 var docObj=document.getElementById(objc.file);
  
 var imgObjPreview=document.getElementById(objc.pic);
 if(docObj.files &&docObj.files[0]){
  
  imgObjPreview.style.display = 'block';
  imgObjPreview.style.width = objc.width;
  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    
  return true;
 } else {
  return false;
 };
  
};
  
// 使用该控件, opts 配置对象
  
var opts = {
　　file : 'file_pic',
　　pic : 'file_view',
　　width : '180px'
}
  
yqUI.setImagePreview(opts);