ホームページ > 記事 > ウェブフロントエンド > ファイルリーダーインターフェイスを介してファイルを読み取るための js サンプルコード
この記事では主に、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 サイトの他の関連記事を参照してください。