Home > Web Front-end > JS Tutorial > js method to implement preview of uploaded images

js method to implement preview of uploaded images

高洛峰
Release: 2016-12-09 10:46:31
Original
1391 people have browsed it

Javascript local operation of image preview

js method to implement preview of uploaded images

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>
Copy after login

// 下面用于图片上传预览功能 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 = &#39;block&#39;;
  imgObjPreview.style.width = objc.width;
  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    
  return true;
 } else {
  return false;
 };
  
};
  
// 使用该控件, opts 配置对象
  
var opts = {
  file : &#39;file_pic&#39;,
  pic : &#39;file_view&#39;,
  width : &#39;180px&#39;
}
  
yqUI.setImagePreview(opts);
Copy after login


Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template