js-Methode zum Implementieren der Vorschau hochgeladener Bilder

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);