SpringMvc+jQuery 文件拖拽上传、选择上传

最近做了个简易的文件上传功能，jsp版本的，后续会完善更多的功能，不过现在已经能用了，需要的小伙伴，直接引用下面的文件内容直接copy到自己的项目中就ok了，效果如图：

fileupload.css：

.fileupload_box {
	position:relative;
	width: 100%;
	height: 100%;
	border: 3px dashed #E5E5E5;
	text-align: center;
	z-index: 2000;
	cursor: pointer;
	margin:0 auto;
}

.fileupload_message {
	position: absolute;
	font-size: 15px;
	color: #999;
	font-weight: normal;
	height:30px;
	top:20px;
	width: 100%;
}
.odao_browser{
	position:absolute;
	width:50%;
	height:36px;
	line-height:36px;
	left:25%;
	bottom:10px;
	-moz-border-radius: 3px; /* Firefox */
  	-webkit-border-radius: 3px; /* Safari 和 Chrome */
  	border-radius:3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  	background:#5c6bc0;
  	color:white;
  	cursor: pointer;
}
.odao_browser input {
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	opacity: .0;
	filter: alpha(opacity= 0);
	direction: ltr;
	cursor: pointer;
}

odao_fileupload_plugin.js：

(function($) {
	$.fn.odao_fileupload=function(setting){
		var defaults = {
		    url: document.URL,
		    method: ‘POST‘,
		    extraData: {},
		    maxFileSize: 0,
		    maxFiles: 0,
		    allowedTypes: ‘*‘,
		    extFilter: null,
		    dataType: null,
		    fileName: ‘file‘,
		    onUploadSuccess: function(fileName,url){}
		  };

		setting = $.extend({},defaults,setting);
		var fn = {
			init:function(){
				var _this = this;
				//拖拽文件上传
				var $targetBox = document.getElementById($(_this).attr(‘id‘));
				$targetBox.addEventListener("drop", function(e) {
				//取消默认浏览器拖拽效果
		       		e.preventDefault();
		       		var fileList = e.dataTransfer.files;
		       		fn.upload.call(_this,fileList[0]);
	       		 }, false);

				//选择文件上传
				$(_this).find(‘input‘).on(‘change‘,function(e){
					var file = e.target.files;
					var file = file.item(0);
					fn.upload.call(_this,file);
				});

			},upload:function(file){
				if(fn.checkType(file)) return;
				var _this = this;
				var fd = new FormData();
	       		fd.append(‘files‘, file);
	       		$.ajax({
	   		        url: $ctx+"/fileUpload/xxxxx.do",
	   		        type: ‘POST‘,
	   		        success: function(data){
	   		        if(data.success)
	   		        	    setting.onUploadSuccess.call(_this,file.name,data);
	   		        	}
	   		        },
	   		        error: function(){
	   		        	showReturnMsg(‘上传失败‘,‘error‘);
	   		        },
	   		        data: fd,
	   		        cache: false,
	   		        contentType: false,
	   		        processData: false
	       		});
			},
			//允许上传的文件类型
			checkType:function(file){
	       		 if (setting.allowedTypes != ‘*‘ && setting.allowedTypes.indexOf(file.type) == -1) {
	       		 	showReturnMsg(‘文件格式错误，只能上传‘+setting.allowedTypes+‘格式的文件‘,‘error‘);
	       		 	return true;
	       		 }
	       		 return false
			}
		};

		return this.each(function(i,n){
			fn.init.call($(n));
		});
	};

	  $(document).on(‘dragenter‘, function (e) { e.stopPropagation(); e.preventDefault(); });
	  $(document).on(‘dragover‘, function (e) { e.stopPropagation(); e.preventDefault(); });
	  $(document).on(‘drop‘, function (e) { e.stopPropagation(); e.preventDefault(); });
})(jQuery);

jsp:

<div id="target_box" class="fileupload_box">   <p class="fileupload_message" >将图片拖动到这里</p>   <p class="odao_chooseFileUpload odao_browser">选择文件   <input type="file" name="files" multiple="multiple">   </p></div>   

调用方法：

$(‘#target_box‘).odao_fileupload({
      onUploadSuccess:function(fileName,attachmentUrl){
      //保存上传文件信息并记录日志
	$.ajax({
	 	type: "post",
	 	url: ‘‘,
	 	data: {‘‘},
	 	dataType: "json",
	 	success: function(data){
	 	 if(data.success){
		    	alert(‘上传成功‘);
	 	  }else{
	 	       alert(‘上传失败‘);
      	          }
	 	 }
	 	});
       },
       allowedTypes:‘image/png‘
 });

spring 配置：

<!-- 文件上传相关 -->
<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--one of the properties available;the maximum upload size in bytes 100M-->
        <property name="maxUploadSize" value="104857600"/>
</bean>

FileUpload.java:

@RequestMapping("/uploadProjectBgPicture.do")
public String uploadProjectBgPicture(@RequestParam MultipartFile[] files,HttpServletRequest request,HttpServletResponse response) throws IOException{
     具体操作内容
}