Heim > Artikel > Web-Frontend > js-Beispielcode zum Lesen von Dateien über die Filereader-Schnittstelle

js-Beispielcode zum Lesen von Dateien über die Filereader-Schnittstelle

零下一度Original: 2017-05-12 09:47:212084Durchsuche

In diesem Artikel wird hauptsächlich ausführlich beschrieben, wie Sie Dateien über die DateiReaderSchnittstelle lesen und die Methode readAsDataURL verwenden, um eine Vorschau von Bildern anzuzeigen Die zugehörigen Methoden haben einen bestimmten Referenzwert.

Verwenden Sie die readAsDataURL-Methode der FileReader-Schnittstelle, um eine Vorschau des Bildes anzuzeigen.

Quellcode:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>通过filereader接口读取文件</title> 
<script type="text/javascript"> 
function readAsDataURL() 
{ 
  if(typeof FileReader==&#39;undifined&#39;) //判断浏览器是否支持filereader 
  { 
    result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>"; 
    return false; 
  } 
  var file=document.getElementById("imagefile").files[0]; 
  if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件 
  { 
    alert("请确保文件为图像文件"); 
    return false; 
  } 
  var reader=new FileReader(); 
  reader.readAsDataURL(file); 
  reader.onload=function(e) 
  { 
    var result=document.getElementById("result"); 
    result.innerHTML=&#39;<img src="&#39;+this.result+&#39;" alt=""/>&#39; 
  } 
   
} 
</script> 
</head> 
 
<body> 
<p> 
  <label>请选择一个文件：</label> 
  <input type="file" id="imagefile" /> 
  <input type="button" value="读取图像" onClick="readAsDataURL();" /> 
</p> 
<p name="result" id="result"> 
  <!-- 这里用来显示图片结果--> 
</p> 
</body> 
</html>

[Verwandte Empfehlungen]

1. Kostenloses js-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3. php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonjs-Beispielcode zum Lesen von Dateien über die Filereader-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Teilen Sie eine tolle Plug-in-Bootstrap-TabelleNächster Artikel：Teilen Sie eine tolle Plug-in-Bootstrap-Tabelle

In Verbindung stehende Artikel

Mehr sehen