<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片上传预览演示-柯乐义</title> <script src="JS/jQuery.js" type="text/javascript"></script> </head> <body> <div style="500px;margin:0px auto;"> <h2>图片上传预览演示</h2> <div><img id="ImgPr" width="240" height="240" /></div> <input type="file" id="up" /> </div> </body> </html> <script type="text/javascript"> /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id="ImgPr" width="120" height="120" /></div> <input type="file" id="up" /> 把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件 $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}); */ $(function () { $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"] }); }); jQuery.fn.extend({ uploadPreview: function (opts) { /* 原生this this和$(this)所指的DOM对象是一致的 原生this没办法$(this)的JQuery的方法 */ var _self = this, _this = $(this); /* jQuery.extend: 属性迭代 */ opts = jQuery.extend({ Img: "ImgPr", Width: 360, Height: 360, ImgType: ["Gif", "Jpeg", "jpg", "bmp", "png"], Callback: function () { alert(1); } }, opts || {}); /* 前端做做图片上传功能时,经常想上传完后可以直接预览, 这时候通常有两种方式,一种就是转成base64编码,然后展示出来。 当然还有另外一种方式,那就是用getObjectURL实现(兼容IE10及以上) */ _self.getObjectURL = function (file) { var url = null; /* 通过window.URL.createObjectURL()方法生成的资源URL bdFile="Blob:http...3a%/asdasd89090786" 这种。 把blob转换File格式显示出来 blob:null/65018f4e-938a-4821-84f3-a9e6aadcaabf 浏览器兼容性适配 */ 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); } console.log(url); return url; }; _this.change(function () { if (this.value) { console.log(this.value);//this.value是所传入的格式 C:fakepathiTunes.exe /** * 因为_this 可以调用JQuery里面方法,当调用change方法是,change方法解析之后返回的是DOM对象 * 所以this指的是原生DOM 对象 */ console.log(_this);//返回的是数组对象 [input#up, selector: "#up", context: document] console.log(this);//返回的是DOM <input type="file" id="up"> /** 正则表达式 判断图片的格式 * 表达式的意思是 将this.value是所传入的格式先装换成小写,在进行正则表达式验证 * 验证方式 - 正则表达式:传入图片的后缀名是否和opts.ImgType传入的参数一直 * !取反 .$ 表示后缀是.xxx i 执行对大小写不敏感的匹配。 */ if (!RegExp(".(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { console.log( opts.ImgType.join("|")); alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种"); this.value = ""; return false; } /* $.browser.msie 在jQuery 1.3中不建议使用。浏览器内核标识 */ if ($.browser.msie) { /** * 在下面的例子中,我们故意在 try 块的代码中写了一个错字。 该实例本应该提醒"欢迎光临!",但弹出的是拼写错误信息。 catch 块会捕捉到 try 块中的错误,并执行代码来处理它: 兼容性配置 */ try { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])); } catch (e) { console.log(_self); var src = ""; var obj = $("#" + opts.Img); var div = obj.parent("div")[0]; _self.select(); if (top != self) { window.parent.document.body.focus() } else { _self.blur() } src = document.selection.createRange().text; document.selection.empty(); obj.hide(); obj.parent("div").css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px' }); /** * Microsoft AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。 * 虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片, * 但是就IE5-IE6而言还是有一定的意义。 * */ div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src; } } else { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])); } opts.Callback(); } }) } }); </script>