jQuery自定义图片上传插件实例代码

$(function(){$("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'})$("#picUrl").imgUpload("resize");/**弹出层水平垂直居中**/})

/**部分代码**/(function($){ $.fn.imgUpload=function(options,param){  if(typeof options =="string"){   return $.fn.imgUpload.methods[options](this,param);  }  /**this为jquery对象**/  options = options || {};  return this.each(function() {   /**this 为 dom 对象**/   var state=$.data(this,"imgUploadData");   var opts;   if(state){    opts = $.extend(state.options, options);    state.options = opts;   }else{    opts = $.extend({},$.fn.imgUpload.defaults,options);    $.data(this,"imgUploadData",{options:opts});   }   init(this); }); }; $.fn.imgUpload.methods={  resize:function(jq){    $(".main-layer").css({    left:($(window).width()-$(".main-layer").outerWidth())/2,    top:($(window).height()-$(".main-layer").outerHeight())/2   });     } } $.fn.imgUpload.defaults={  width:100,  height:200,  url:'#' }})(jQuery);

/**html5 formData**/ function upload(jq){  var formData=new FormData();  var opts = $.data(jq,"imgUploadData").options;  formData.append('file',$("#imgFile")[0].files[0]);  $.ajax({   url: opts.url,   type: 'POST',    cache: false,    data: formData,    processData: false,    contentType: false,    success:function(url){    console.info(url);   },   error:function(url){    console.info(url);   }  }) }

.main-layer .a-upload {  padding: 4px 10px;  height: 20px;  line-height: 20px;  position: relative;  cursor: pointer;  color: #888;  background: #fafafa;  border: 1px solid #ddd;  border-radius: 4px;  overflow: hidden;  display: inline-block;  *display: inline;  *zoom: 1 ; width:90%; text-align: center;}  .a-upload input {  position: absolute;  font-size: 100px;  right:0;  top: 0;  opacity: 0;  filter: alpha(opacity=0);  cursor: pointer }

/***遮罩层样式**/.wrap-overlayer{ position: fixed; left: 0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index:10; display:none;}/**上传组件样式**/.main-layer{ position:absolute; left:50%;top:50%; background-color: #fff; width:350px; height: 150px;}

@RequestMapping(value="/upload.do",method=RequestMethod.POST)   private void fildUpload(@RequestParam(value="file",required=false) MultipartFile file,     HttpServletRequest request,HttpServletResponse resp)throws Exception{     //获得物理路径webapp所在路径    String pathRoot = request.getSession().getServletContext().getRealPath("");    String path="";    if(!file.isEmpty()){     //生成uuid作为文件名称     String uuid = UUID.randomUUID().toString().replaceAll("-","");     //获得文件类型（可以判断如果不是图片，禁止上传）     String contentType=file.getContentType();     //获得文件后缀名称     String imageName=contentType.substring(contentType.indexOf("/")+1);     path="/images/"+uuid+"."+imageName;     file.transferTo(new File(pathRoot+path));    }    request.setAttribute("imagesPath", path);   }