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

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

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

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

html如下

rush:xhtml;"> uploadPreview演示

插件uploadPreview.js代码如下

rush:js;"> /* *发布时间:2014年12月12日 *插件介绍:图片上传本地预览插件兼容浏览器(IE 谷歌火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容 *使用方法: *界面构造(img标签外必须拥有DIV 而且必须给予DIV控件ID) *

* *调用代码: * new uploadPreview({ UpBtn: "up_img",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程序设计有所帮助。

图片预览插件插件

上一篇：利用angular.copy取消变量的双向绑下一篇：微信JS-SDK自定义分享功能实例详解

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

相关推荐