Javascript lokaler Betrieb der Bildvorschau
Frühe Browser können lokale Bilder nicht als Seitenelemente verarbeiten. Um eine Bildvorschau zu erreichen, muss das Bild zuerst auf den Server hochgeladen werden. und dann Vorschau vom Server abrufen
Moderne Browser werden immer umfassender, sodass sie einige Daten lokal verarbeiten können Chrome MsEdge (IE11) Firefox
Der HTML-Code im obigen Bild
<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-Methode zum Implementieren der Vorschau hochgeladener Bilder" ></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);