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

本文实例讲述了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程序设计有所帮助。