自定义图片上传插件

闲来无事，为毕业设计写了个文件上传插件，bug挺多的，值得完善的东西也很多。

摘要

1. jquery自定义插件方法
2. 表单file样式调整
3. 利用formData,ajax上传图片
4. js,css弹出层
5. springmvc上传图片

效果

调用方式

$("#picUrl").imgUpload({})，在代码内部为调用对象绑定了click事件，点击弹出上传界面。

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

jquery自定义插件要点

1. 定义作用域
2. $.fn.***为每个jquery对象扩展方法
3. 设置默认值
4. return this.each，支持链式调用

/**部分代码**/
(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);

利用formData,ajax上传文件

	/**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);
    		}
		})
	}

表单file样式调整

.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  
}

js,css弹出层样式

/***遮罩层样式**/
.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);    
	    }