JavaScript实现预览本地上传图片功能完整示例

2024-05-06 16:48:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考，具体如下：

<html><head><title>www.vevb.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,预览,上传,图片