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

021-64391578/13915879584
关注迅速公众平台
企业电话：021-64391578
jquery实现图片上传之前预览的方法
本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下：
				
									<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
								
									"">
								
									<html xmlns="">
								
									<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) {
								
									      varurl =null;
								
									      if(window.createObjectURL != undefined) {
								
									        url = window.createObjectURL(file)
								
									      }elseif(window.URL != undefined) {
								
									        url = window.URL.createObjectURL(file)
								
									      }elseif(window.webkitURL != undefined) {
								
									        url = window.webkitURL.createObjectURL(file)
								
									      }
								
									      returnurl
								
									    };
								
									    _this.change(function() {
								
									      if(this.value) {
								
									        if(!RegExp("\.("+ opts.ImgType.join("|") +")$","i").test(this.value.toLowerCase())) {
								
									          alert("选择文件错误,图片类型必须是"+ opts.ImgType.join(",") +"中的一种");
								
									          this.value ="";
								
									          returnfalse
								
									        }
								
									        if($.browser.msie) {
								
									          try{
								
									            $("#"+ opts.Img).attr('src', _self.getObjectURL(this.files[0]))
								
									          }catch(e) {
								
									            varsrc ="";
								
									            varobj = $("#"+ opts.Img);
								
									            vardiv = 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程序设计有所帮助。