FileReader:ローカルピクチャファイルを読み込み、表示する

 
プレゼンテーションの表示
ページにローカルピクチャを表示するには、以前は選択したピクチャファイルをバックエンドサーバにアップロードし、バックエンドに格納し、ピクチャのURLをフロントエンドに戻し、フロントエンドにこのURLでピクチャを表示するのが一般的でした.HTML 5のFileReaderインタフェースはローカルプレビューをサポートしており、FileReaderインタフェースは主にファイルをメモリに読み込み、ファイル内のデータを読み取る方法を提供しており、もちろんローカル画像をアップロードする必要はありません.現在、高級ブラウザはFileReaderインタフェースを実現しているので、IE 6のような古いものは直接太くなっています.
その前に、HTML 5アプリケーションのファイルをドラッグしてアップロードする文章があります.この文章を読んだ後、ドラッグして画像を表示したり、画像を編集したり、最後にアップロードしたりする機能を作ってみてください.
HTML
最初のステップhtmlを作成し、ページにファイル選択のinput#file_を配置します.inputと結果を表示するdiv#result.

<p> 
   <label>         ：</label> 
   <input type="file" id="file_input" /> 
</p>  
<div id="result"></div> 

Javascript
getElementByIdでノードを取得し、ブラウザの互換性を判断します.FileReaderインタフェースがサポートされていないブラウザでは、inputを無効にするプロンプトが表示されます.そうしないと、inputのchangeイベントが傍受されます.

var result = document.getElementById("result"); 
var input = document.getElementById("file_input"); 
 
if(typeof FileReader==='undefined'){ 
    result.innerHTML = "  ，         FileReader"; 
    input.setAttribute('disabled','disabled'); 
}else{ 
    input.addEventListener('change',readFile,false); 
} 

そしてfile_inputのchangeイベントがトリガーされると、関数readFile()が呼び出されます.readFileでは、まずfileオブジェクトを取得し、fileのtypeプロパティでファイルタイプを検出します.もちろん、画像タイプのファイルのみを選択できます.次に、FileReaderインスタンスをnewし、readAsDataURLメソッドを呼び出して選択した画像ファイルを読み込み、onloadイベントで正常に読み込まれたファイル内容を取得します.選択したピクチャをimgノードを挿入して表示します.

function readFile(){ 
    var file = this.files[0]; 
    if(!/image\/\w+/.test(file.type)){ 
        alert("       ！"); 
        return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){ 
        result.innerHTML = '<img src="'+this.result+'" alt=""/>' 
    } 
} 

どうでしょう.バックグラウンドと対話せずにローカル画像をページに表示できるように見えます.最後にFileReaderの方法とイベントを理解します.
FileReaderのメソッドとイベント
パラメータ/イベント
説明
方法
abort
わりこみよみとり
readAsText(file, [encoding])
ファイルをテキストとして読み込む方法には2つのパラメータがあり、2番目のパラメータはテキストの符号化方法であり、デフォルト値はUTF-8である.この方法は非常に理解しやすく、ファイルをテキストで読み取り、読み取りの結果、このテキストファイルの内容になります.
readAsBinaryString(file)
ファイルをバイナリコードで読み込む通常はバックエンドに転送し、バックエンドはこの文字列でファイルを格納できます.
readAsDataURL(file)
ファイルをDataURLとして読み込み、ファイルを一連のData URL文字列として読み込み、小さなファイルを特殊なフォーマットのURLアドレスで直接ページに読み込みます.小ファイルとは、画像やhtmlなどのフォーマットのファイルを指します.
≪イベント｜Events｜ldap≫
onabort
データ読み込み中断時にトリガー
onerror
データ読み込みエラー時にトリガー
onloadstart
データ読み込み開始時にトリガー
onload
データ読み込みが正常に完了するとトリガーされます
onloadend
データの読み込みが完了したときにトリガーされます.
声明:本文はオリジナルの文章で、helloweba.comと作者は著作権を持っていて、もし転載する必要があるならば、hellowebaに由来することを明記してください.comと原文リンクを保持する:http://www.helloweba.com/view-blog-224.html