JS实现的图片预览插件与用法示例【不上传图片】

2019-11-19 18:49:17

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现不需要上传的图片预览插件与用法。分享给大家供大家参考，具体如下：

小小的几十行代码，很牛逼，很实用。

支持多个图片的预览，只要new多个对象就行了。

html如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>uploadPreview演示</title>  <script src="uploadPreview.js" type="text/javascript"></script>  <script>    window.onload = function () {       new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });      new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });    }  </script></head><body>  <div id="imgdiv"><img id="imgShow" width="200"/></div>  <input type="file" id="up_img" />  <div id="imgdiv"><img id="imgShow2" width="200" /></div>  <input type="file" id="up_img2" /></body></html>

插件uploadPreview.js代码如下

/**发布时间:2014年12月12日*插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容*使用方法:*界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)* <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>* <input type="file" id="up_img" />*调用代码:* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });*参数说明:*UpBtn:选择文件控件ID;*DivShow:DIV控件ID;*ImgShow:图片控件ID;*Width:预览宽度;*Height:预览高度;*ImgType:支持文件类型 格式:["jpg","png"];*callback:选择文件后回调方法;*版本:v1.4更新内容如下:1.修复回调.*版本:v1.3更新内容如下:1.修复多层级框架获取路径BUG.2.去除对jquery插件的依赖.*//**work:图片预览插件*/var uploadPreview = function(setting) {  /*  *work:this(当前对象)  */  var _self = this;  /*  *work:判断为null或者空值  */  _self.IsNull = function(value) {    if (typeof (value) == "function") { return false; }    if (value == undefined || value == null || value == "" || value.length == 0) {      return true;    }    return false;  }  /*  *work:默认配置  */  _self.DefautlSetting = {    UpBtn: "",    DivShow: "",    ImgShow: "",    Width: 100,    Height: 100,    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],    ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",    callback: function() { }  };  /*  *work:读取配置  */  _self.Setting = {    UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,    DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,    ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,    Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,    Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,    ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,    ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,    callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback  };  /*  *work:获取文本控件URL  */  _self.getObjectURL = function(file) {    var url = null;    if (window.createObjectURL != undefined) {      url = window.createObjectURL(file);    } else if (window.URL != undefined) {      url = window.URL.createObjectURL(file);    } else if (window.webkitURL != undefined) {      url = window.webkitURL.createObjectURL(file);    }    return url;  }  /*  *work:绑定事件  */  _self.Bind = function() {    document.getElementById(_self.Setting.UpBtn).onchange = function() {      if (this.value) {        if (!RegExp("/.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {          alert(_self.Setting.ErrMsg);          this.value = "";          return false;        }        if (navigator.userAgent.indexOf("MSIE") > -1) {          try {            document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);          } catch (e) {            var div = document.getElementById(_self.Setting.DivShow);            this.select();            top.parent.document.body.focus();            var src = document.selection.createRange().text;            document.selection.empty();            document.getElementById(_self.Setting.ImgShow).style.display = "none";            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";            div.style.width = _self.Setting.Width + "px";            div.style.height = _self.Setting.Height + "px";            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;          }        } else {          document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);        }        _self.Setting.callback();      }    }  }  /*  *work:执行绑定事件  */  _self.Bind();}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript文件与目录操作技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

下一篇：微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换