Home >Web Front-end >JS Tutorial >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);