使用FileReader接口的readAsDataURL方法實(shí)現(xiàn)圖片的預(yù)覽。
源代碼：
<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("請(qǐng)確保文件為圖像文件"); return false; } var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function(e) { var result=document.getElementById("result"); result.innerHTML='<img src="'+this.result+'" } } </script> </head> <body> <p> <label>請(qǐng)選擇一個(gè)文件：</label> <input type="file" id="imagefile" /> <input type="button" value="讀取圖像" onClick="readAsDataURL();" /> </p> <div name="result" id="result"> <!-- 這里用來顯示圖片結(jié)果--> </div> </body> </html> 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
