fileReader讀取文件
阿新 • • 發佈：2017-12-30
meta 文本 itl this alert .get 讀取 nco adas
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>fileReader方法示例</title> <script> var result=document.getElementById("result"); var file=document.getElementById("file"); function readAsDataURL() { var file=document.getElementById("file").files[0]; if(!/image\/\w+/.test(file.type)) { alert("請確保文件類型為圖像類型"); return false; } var reader=new FileReader(); reader.readAsDataURL(file);//readAsDataURL(file) reader.onload=function(e){//成功讀取後執行 var result=document.getElementById("result"); result.innerHTML=‘<img src="‘+this.result+‘" >‘ } } function readAsText(){var file = document.getElementById("file").files[0]; var reader = new FileReader(); //將文件以文本形式讀入頁面 reader.readAsText(file);//readAsText(file,[encoding]),默認編碼為utf8 reader.onload=function(f){ var result=document.getElementById("result"); //顯示文件 result.innerHTML=this.result; } } </script> </head> <body> <p> <label>請選擇一個文件：</label> <input type="file" id="file"> <input type="button" value="讀取圖像" onclick="readAsDataURL()"> <input type="button" value="讀取文本文件" onclick="readAsText()"> </p> <div name="result" id="result"> </div> </body>
fileReader讀取文件