使用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> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
