fileReader讀取文件

時間 2019-11-08

標籤 filereader 讀取文件简体版

原文原文鏈接

<!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+'" alt="">'
   }
}
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>

相關標籤/搜索

filewriter&filereader