JavaScript通過filereader介面讀取檔案

NO IMAGE

使用FileReader介面的readAsDataURL方法實現圖片的預覽。

原始碼:


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>通過filereader介面讀取檔案</title> 
<script type="text/javascript"> 
function readAsDataURL() 
{ 
if(typeof FileReader=='undifined') //判斷瀏覽器是否支援filereader 
{ 
result.innerHTML="<p>抱歉,你的瀏覽器不支援 FileReader</p>"; 
return false; 
} 
var file=document.getElementById("imagefile").files[0]; 
if(!/image\/\w /.test(file.type)) //判斷獲取的是否為圖片檔案 
{ 
alert("請確保檔案為影象檔案"); 
return false; 
} 
var reader=new FileReader(); 
reader.readAsDataURL(file); 
reader.onload=function(e) 
{ 
var result=document.getElementById("result"); 
result.innerHTML='<img src="' this.result '" alt=""/>' 
} 
} 
</script> 
</head> 
<body> 
<p> 
<label>請選擇一個檔案:</label> 
<input type="file" id="imagefile" /> 
<input type="button" value="讀取影象" onClick="readAsDataURL();" /> 
</p> 
<div name="result" id="result"> 
<!-- 這裡用來顯示圖片結果--> 
</div> 
</body> 
</html> 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

javascript HTML5檔案上傳FileReader API藉助FileReader實現將檔案編碼為Base64後通過AJAX上傳談談基於iframe、FormData、FileReader三種無重新整理上傳檔案的方法File, FileReader 和 Ajax 檔案上傳例項分析(php)node.js讀取檔案到字串的方法node.js實現逐行讀取檔案內容的程式碼PHP 讀取檔案內容程式碼(txt,js等)JSP讀取檔案例項JavaScript使用readAsDataUrl方法預覽圖片js上傳圖片預覽的實現方法