本文實例講述了JavaScript實現預覽本地上傳圖片功能。分享給大家供大家參考，具體如下：
<html><head><title>m.survivalescaperooms.com 圖片上傳預覽</title><script> function PreviewImage(imgFile) { var pattern = /(/.*.jpg$)|(/.*.png$)|(/.*.jpeg$)|(/.*.gif$)|(/.*.bmp$)/; if (!pattern.test(imgFile.value)) { alert("系統僅支持jpg/jpeg/png/gif/bmp格式的照片！"); imgFile.focus(); } else { var path; if (document.all) {//IE imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = ""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + path + "/")";//使用濾鏡效果 } else {//FF path = URL.createObjectURL(imgFile.files[0]); document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>"; } } }</script></head><body> <div> <input type="file" onchange='PreviewImage(this)' /> <div id="imgPreview" style='width: 500px; height: 400px;'> <img src="" /> </div> </div></body></html>可得如下運行效果：
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
