java实习生一枚，前端知识薄弱，最近因为工作需要，做了一个拖拽文件上传的功能，发现dropzone.js挺不错的，特地做个笔记。

dropzonejs 的官网是：http://www.dropzonejs.com/， 中文手册是：http://wxb.github.io/dropzonejs.com.zh-CN/

自己写的拖拽文件至一个按钮上传的功能，前端及java代码如下：

jsp页面：

1. 首先必须引入dropzone的js和css文件

2.自己定义两个div区域

3.对dropzone.css进行修改，将文件内的所有dropzone替换为dropz

修改文件拖拽区域的显示样式：

.dropz {/*设置拖拽上传文件按钮的格式*/

min-height:0px;

min-width: 100px;

border: 1px solid #58AF0C;

background: white;

padding: 15px 20px;

background-color: #7AC143;

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7AC143),

color-stop(1, #7AC143));

background-position: center top;

background-repeat: no-repeat;

border-radius: 5px;

min-height:0px;

min-width: 100px;

padding: 15px 20px;

color: #FFF;

font: bold 12px Arial, Helvetica, sans-serif;

text-align: center;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

}

.dropz.dz-clickable {

cursor: pointer;

line-height: 0px;/*按钮中的文字垂直居中*/

}

4.在jsp对div进行dropzone参数的自定义

$("#div1").dropzone({

url:"systemController.action?saveFile",//上传文件的地址，

maxFiles:1,//最多上传几个文件

maxFilesize: 5,//文件的大小，单位是M

addRemoveLinks:true,//是否有删除文件的功能

dictRemoveFile:"",//删除文件

previewsContainer:"#div2",//文件上传进度显示的区域

acceptedFiles: ".jpg,.jpeg,.png,.gif,.xls,.txt,.sql,.rar,.mkv",//支持的格式

paramName:'file',//上传的FILE名称，即服务端可以通过此来获取上传的文件，如$_FILES['dropimage']

init: function() {//初始化时的事件

//$("#uploadfile").uploadFile({success:function(data){

this.on("addedfile", function(file) {

// Create the remove button

var removeButton = Dropzone.createElement("");

// Capture the Dropzone instance as closure.

var _this = this;

// Listen to the click event

removeButton.addEventListener("click", function(e) {

// Make sure the button click doesn't submit the form:

e.preventDefault();

e.stopPropagation();

alert("Are you sure to delete?");

// Remove the file preview.

_this.removeFile(file);

// If you want to the delete the file on the server as well,

// you can do the AJAX request here.

});

// Add the button to the file preview element.

file.previewElement.appendChild(removeButton);

});

this.on("success", function(file, data) {

if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {

var d = $.parseJSON(data);

var fileitem = "" + d.name

+ "

+ d.fileKey + "','" + d.name

+ "') title='删除' src='plug-in/uploadify/img/uploadify-cancel.png' widht='15' height='15'>  ";

$("#fileslist").html(fileitem);

$("#attachment").val(d.fileKey + "," + d.name + ";");

}

this.removeFile(file);

});

}

});

java后台处理文件上传的代码：

@RequestMapping(params = "saveFile", method = RequestMethod.POST)

public void saveFile(HttpServletRequest request, HttpServletResponse response, TSDocument document) throws Exception{

Map attributes = new HashMap();

TSTypegroup tsTypegroup=systemService.getTypeGroup("fieltype","文档分类");

TSType tsType = systemService.getType("files","附件", tsTypegroup);

String fileKey = oConvertUtils.getString(request.getParameter("fileKey"));// 文件ID

String documentTitle = oConvertUtils.getString(request.getParameter("documentTitle"),"uploadfile");// 文件标题

if (StringUtil.isNotEmpty(fileKey)) {

document.setId(fileKey);

document = systemService.getEntity(TSDocument.class, fileKey);

document.setDocumentTitle(documentTitle);

}

document.setBusinessKey(request.getParameter("businessKey"));

document.setSubclassname(MyClassLoader.getPackPath(document));

document.setCreatedate(DateUtils.gettimestamp());

document.setTSType(tsType);

UploadFile uploadFile = new UploadFile(request, document);

uploadFile.setCusPath("files");

uploadFile.setSwfpath("swfpath");

document = systemService.uploadFile(uploadFile);

attributes.put("url", document.getRealpath());

attributes.put("fileKey", document.getId());

if (ResourceUtil.getSessionUserName()!=null) {

attributes.put("uploadUser", ResourceUtil.getSessionUserName().getUserName());

}else{

attributes.put("uploadUser", "null");

}

attributes.put("time", new SimpleDateFormat("yyyy-MM-dd").format(new Date()));

attributes.put("name", document.getAttachmenttitle()+"."+document.getExtend());

attributes.put("downloadurl", "commonController.action?viewFile&fileid="+ document.getId()+"&subclassname=");

attributes.put("viewhref", "commonController.action?objfileList&fileKey=" + document.getId());

attributes.put("delurl", "commonController.action?delObjFile&fileKey=" + document.getId());

attributes.put("realPath", document.getRealpath());

if(FileUtils.isPicture(document.getExtend())){

attributes.put("imgUrl", document.getRealpath());

}

JSONObject js = new JSONObject(attributes);

response.getWriter().write(js.toString());

response.getWriter().flush();

}

注意这里的返回值是直接返回的json对象，如果采用

@RequestMapping(params = "saveFiles", method = RequestMethod.POST)

@ResponseBody

则会报错:

[com.framework.core.common.exception.MyExceptionHandler]org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation最终实现的效果如下：

更多使用功能请参考dropzone的官方文档。