ホームページ  >  記事  >  ウェブフロントエンド  >  ファイルリーダーインターフェイスを介してファイルを読み取るための 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==&#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>

【関連推奨事項】

1.

無料のjsオンラインビデオチュートリアル

2.

php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がファイルリーダーインターフェイスを介してファイルを読み取るための js サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。