JavaScript實現(xiàn)預(yù)覽本地上傳圖片功能完整示例

2019-11-19 12:01:13

字體：大中小

供稿：網(wǎng)友

本文實例講述了JavaScript實現(xiàn)預(yù)覽本地上傳圖片功能。分享給大家供大家參考，具體如下：

<html><head><title>www.survivalescaperooms.com 圖片上傳預(yù)覽</title><script>   function PreviewImage(imgFile) {    var pattern = /(/.*.jpg$)|(/.*.png$)|(/.*.jpeg$)|(/.*.gif$)|(/.*.bmp$)/;    if (!pattern.test(imgFile.value)) {      alert("系統(tǒng)僅支持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>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行效果：