jquery实现图片上传之前预览的方法

本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下：
<！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></title><script src="jquery-1.8.1.min.js" type="text/javascript"></script><script>/**参数说明: 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 （） { }}）;*/jQuery.fn.extend（{uploadPreview: function （opts） {var _self = this,_this = $（this）;opts = jQuery.extend（{Img: "ImgPr",Width: 100,Height: 100,ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],Callback: function （） {}}, opts || {}）;_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};_this.change（function （） {if （this.value） {if （！RegExp（".（" + opts.ImgType.join（"|"） + "）$", "i"）.test（this.value.toLowerCase（））） {alert（"选择文件错误,图片类型必须是" + opts.ImgType.join（"，"） + "中的一种"）;this.value = "";return false}if （$.browser.msie） {try {$（"#" + opts.Img）.attr（"src", _self.getObjectURL（this.files[0]））} catch （e） {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"}）;div.filters.item（"DXImageTransform.Microsoft.AlphaImageLoader"）.src = src}} else {$（"#" + opts.Img）.attr（"src", _self.getObjectURL（this.files[0]））}opts.Callback（）}}）}}）;$（function （） {$（"#up"）.uploadPreview（{ Img: "ImgPr", Width: 120, Height: 120 }）;}）;</script></head><body><div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2><div><img id="ImgPr" width="120" height="120" /></div><input type="file" id="up" /></div></body></html>
希望本文所述对大家的jquery程序设计有所帮助。