FileReader 方法實現預覽圖片

時間 2019-11-30

標籤 filereader 方法實現預覽圖片简体版

原文原文鏈接

FileReader 方法

方法名	參數	描述
abort	none	中斷讀取
readAsBinaryString	file（blob）	將文件讀取爲二進制碼
readAsDataURL	file（blob）	將文件讀取爲 DataURL
readAsText	file, （blob）	將文件讀取爲文本

FileReader 事件

事件	描述
onabort	中斷時觸發
onerror	出錯時觸發
onload	文件讀取成功完成時觸發
onloadend	讀取完成觸發，不管成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中

案例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<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 img_result=document.getElementById("result");
        img.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>

FileReader 方法 實現預覽圖片

FileReader 方法

FileReader 事件

案例：

FileReader 方法實現預覽圖片