Heim > Web-Frontend > js-Tutorial > js-Methode zum Implementieren der Vorschau hochgeladener Bilder

js-Methode zum Implementieren der Vorschau hochgeladener Bilder

高洛峰
Freigeben: 2016-12-09 10:46:31
Original
1399 Leute haben es durchsucht

Javascript lokaler Betrieb der Bildvorschau

js-Methode zum Implementieren der Vorschau hochgeladener Bilder

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>
Nach dem Login kopieren

 

// 下面用于图片上传预览功能 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);
Nach dem Login kopieren


Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage