最近做了个简易的基于boostrap的文件上传功能，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{
具体操作内容
}