HTML 5ローカルファイルFileReader APIインタフェースの読み込み
FileReaderインタフェースには4つの方法があり、そのうち3つはファイルの読み取りに使用され、もう1つは読み取りを中断するために使用されます.読み取りに成功しても失敗しても、メソッドは読み取り結果を返さず、resultプロパティに格納されます.
FileReaderインタフェースの方法
メソッド名
パラメータ
説明
readAsBinaryString
file
ファイルをバイナリエンコーディングとして読み込む
readAsText
file,[encoding]
ファイルをテキストとして読み込む
readAsDataURL
file
データURLとしてファイルを読み込む
abort
(none)
端末読取操作
2、FileReaderインタフェースイベント
FileReaderインタフェースには、読み取りファイルの状態をキャプチャするための完全なイベントモデルが含まれています.
FileReaderインタフェースのイベント
≪イベント｜Events｜ldap≫
説明
onabort
わりこみ
onerror
エラー
onloadstart
スタート
onprogress
読み込み中
onload
読み込みに成功
onloadend
正常な失敗にかかわらず、読み取りが完了しました.
3、FileReaderインタフェースの使用
1 2 3 4 5 6
// FileReader if(typeof FileReader == 'undefined'){ result.InnerHTML="< p > FileReader ！ p >"; // file.setAttribute("disabled","disabled"); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function readAsDataURL(){ // var file = document.getElementById("file").files[0]; if(!/image\/\w+/.test(file.type)){ alert(" ， ！"); return false; } var reader = new FileReader(); // Data URL reader.readAsDataURL(file); reader.onload=function(e){ var result=document.getElementById("result"); // result.innerHTML='< img src="' + this.result +'" alt="" />'; } } 1 2 3 4 5 6 7 8 9 10 11
function readAsBinaryString(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); // reader.readAsBinaryString(file); reader.onload=function(f){ var result=document.getElementById("result"); // result.innerHTML=this.result; } } 1 2 3 4 5 6 7 8 9 10 11
function readAsText(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); // reader.readAsText(file); reader.onload=function(f){ var result=document.getElementById("result"); // result.innerHTML=this.result; } } 例-demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
doctype html> < html > < head > < title > title > < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < meta name="description" content=""> < meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> head > < body > < script > function readLocalFile () { //alert("start..."); var localFile = document.getElementById("uploadFile").files[0]; //alert(uploadFile); //alert(localFile.name); //alert(localFile.type); //alert(localFile.size); var reader = new FileReader(); //Uncaught SyntaxError:Unexpected identifier var content; reader.onload = function(event) { content = event.target.result; //alert(content); document.getElementById("img").src = content; document.getElementById("fileContent").value = content; } reader.onerror = function(event) { alert('error') //alert("File could not be read! Code " + event.target.error.code); } //reader.readAsText(localFile,"UTF-8"); content = reader.readAsDataURL(localFile,"UTF-8"); // } script >
< section > < input type="file" id="uploadFile" onchange="readLocalFile()";/> < div >< img src="" id="img"/> div > < div >< textarea id="fileContent" rows="30" cols="60"> textarea > div > section >
body >
html >