jQuery实现本地预览上传图片功能

本文实例介绍了基于JQUERY扩展，图片上传预览插件，目前兼容浏览器（IE 谷歌火狐）不支持safari，分享给大家供大家参考，具体内容如下

HTML代码：

<html><head><title>图片上传预览演示</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="16/uploadPreview.js" type="text/javascript"></script><script>$（function （） {$（"#up"）.uploadPreview（{ Img: "ImgPr", Width: 120, Height: 120 }）;}）;</script></head><body><div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2><a href="# target="_blank">原文</a><div><img id="ImgPr" width="120" height="120" /></div><input type="file" id="up" /></div></body></html>

js代码：

*参数说明: 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（）}}）}}）;

直接上第二段代码，jquery js实现上传图片之前预览本地图片

<style type="text/css">#preview_wrapper{display:inline-block;width:300px;height:300px;background-color:#CCC;}#preview_fake{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod=scale）;}#preview_size_fake{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod=image）; visibility:hidden;}#preview{width:300px;height:300px;}</style><script type="text/javascript">function onUploadImgChange（sender）{if（ ！sender.value.match（ /.jpg|.gif|.png|.bmp/i ） ）{alert（"图片格式无效！"）;return false;}var objPreview = document.getElementByIdx_x（"preview"）;var objPreviewFake = document.getElementByIdx_x（"preview_fake"）;var objPreviewSizeFake = document.getElementByIdx_x（"preview_size_fake"）;if（ sender.files && sender.files[0] ）{objPreview.style.display = "block";objPreview.style.width = "auto";objPreview.style.height = "auto";// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径objPreview.src = sender.files[0].getAsDataURL（）;}else if（ objPreviewFake.filters ）{// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径sender.select（）;var imgSrc = document.selection.createRange（）.text;objPreviewFake.filters.item（"DXImageTransform.Microsoft.AlphaImageLoader"）.src = imgSrc;objPreviewSizeFake.filters.item（"DXImageTransform.Microsoft.AlphaImageLoader"）.src = imgSrc;autoSizePreview（ objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ）;objPreview.style.display = "none";}} function onPreviewLoad（sender）{autoSizePreview（ sender, sender.offsetWidth, sender.offsetHeight ）;} function autoSizePreview（ objPre, originalWidth, originalHeight ）{var zoomParam = clacImgZoomParam（ 300, 300, originalWidth, originalHeight ）;objPre.style.width = zoomParam.width + "px";objPre.style.height = zoomParam.height + "px";objPre.style.marginTop = zoomParam.top + "px";objPre.style.marginLeft = zoomParam.left + "px";} function clacImgZoomParam（ maxWidth, maxHeight, width, height ）{var param = { width:width, height:height, top:0, left:0 };if（ width>maxWidth || height>maxHeight ）{rateWidth = width / maxWidth;rateHeight = height / maxHeight;if（ rateWidth > rateHeight ）{param.width = maxWidth;param.height = height / rateWidth;}else{param.width = width / rateHeight;param.height = maxHeight;}}param.left = （maxWidth - param.width） / 2;param.top = （maxHeight - param.height） / 2;return param;}</script> <input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange（this）"/> <！--以下是预览图片用的--><div id="preview_wrapper"><div id="preview_fake"><img id="preview" src="" onload="onPreviewLoad（this）"/></div></div><br/><img id="preview_size_fake" />

以上就是本文的全部内容，希望对大家的学习有所帮助。