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=='undifined') //判断浏览器是否支持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='<img src="'+this.result+'" alt=""/>'
}
}
</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>Das obige ist der detaillierte Inhalt vonCodebeispiel zum Lesen von Dateien über die Filereader-Schnittstelle in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
