js は readAsDataUrl を使用して画像サンプルコードをプレビューします-jsチュートリアル-php.cn

js は readAsDataUrl を使用して画像サンプルコードをプレビューします

零下一度

リリース： 2017-05-12 09:47:38

オリジナル

1696 人が閲覧しました

この記事では主に JavaScript について詳しく紹介します写真をプレビューするために readAsDataUrl メソッドを使用します。これには特定の参照値があります。興味のある方は参照してください。この記事の例では、readAsDataUrl の具体的な詳細を共有します。画像をプレビューするためのコードです。具体的な内容は次のとおりです

<html> 
 <head> 
 <title> New Document </title> 
 <meta name="Generator" content="EditPlus"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 </head> 
 
 <body> 
<script type="text/javascript"> 
  function $$(id){ 
    return document.getElementById(id); 
  } 
 
  function filePrevImg(files){ 
    //检测浏览器是否支持FileReader对象 
    if(typeof FileReader == "undefined"){ 
      alert("您的浏览器不支持FileReader对象！"); 
    } 
    var strHtml = ""; 
    for(var intI=0;intI<files.length;intI++){ 
      var tmpFile = files[intI]; 
      var reader = new FileReader();//每循环一次都要重新new一个FileReader实例 
      reader.readAsDataURL(tmpFile); 
      reader.onload=function(e){ 
        alert(e.target.result); 
        strHtml += "<img src=&#39;"+e.target.result+"&#39; alt=&#39;&#39;/>"; 
        $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>"; 
      }; 
    } 
  } 
</script> 
  </head> 
  <body> 
  <fieldset> 
    <legend>使用readAsDataUrl()方法预览图片</legend> 
    <input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" /> 
    <ul id="prevUpload"></ul>  
  </fieldset> 
 </body> 
</html>

ログイン後にコピー

[関連する推奨事項]

JavaScript 中国語リファレンスマニュアル

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

以上がjs は readAsDataUrl を使用して画像サンプルコードをプレビューしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。