ホームページ > 記事 > ウェブフロントエンド > ファイルリーダーインターフェイスを介してファイルを読み取るための js サンプルコード
ファイルリーダーインターフェイスを介してファイルを読み取るための js サンプルコード
- 零下一度オリジナル
- 2017-05-12 09:47:212084ブラウズ
この記事では主に、filereaderインターフェースを介してファイルを読み込み、画像をプレビューする関連メソッドを詳しく紹介します。興味のある方は参考にしてください。画像をプレビューするには、FileReader インターフェイスの readAsDataURL メソッドを使用します。
ソースコード:
<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>【関連推奨事項】
1.
無料のjsオンラインビデオチュートリアルphp.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル以上がファイルリーダーインターフェイスを介してファイルを読み取るための js サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。