Java实习生一枚，前端知识薄弱，最近因为工作需要，做了一个拖拽文件上传的功能，发现dropzone.js挺不错的，特地做个笔记。
dropzonejs 的官网是：http://www.dropzonejs.com/， 中文手册是：http://wxb.github.io/dropzonejs.com.zh-CN/
自己写的拖拽文件至一个按钮上传的功能，前端及java代码如下：
jsp页面：
1. 首先必须引入dropzone的js和css文件
|
1
2
|
<link rel="stylesheet" href="dropzone/css/dropzone.css" rel="external nofollow" >
<script src="dropzone/js/dropzone.js"></script>
|
2.自己定义两个div区域
|
1
2
3
4
5
6
7
|
<%--拖拽文件上传 --%>
<div id="div1" class="dropz" style="width:0px; height:0px;">
uopload
</div>
<div id="div2" class="dropz" style=" background: white;border:none;float:left;">
</div>
|
这是我的文件上传之后的文件队列区域：
|
1
|
<div id="fileslist" style="padding: 10px;"></div>
|
3.对dropzone.css进行修改，将文件内的所有dropzone替换为dropz
修改文件拖拽区域的显示样式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.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参数的自定义
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<script type="text/javascript">
$("#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("<img src='plug-in/uploadify/img/uploadify-cancel.png' id="codetool">
java后台处理文件上传的代码：
注意这里的返回值是直接返回的json对象，如果采用
则会报错:
复制代码 代码如下:
[com.framework.core.common.exception.MyExceptionHandler]org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
最终实现的效果如下：
更多使用功能请参考dropzone的官方文档。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。 原文链接：http://blog.csdn.net/crush1988/article/details/75131079 延伸 · 阅读
精彩推荐
最近更新
编辑推荐
阅读排行
|
