Java實(shí)習(xí)生一枚，前端知識(shí)薄弱，最近因?yàn)楣ぷ餍枰隽艘粋€(gè)拖拽文件上傳的功能，發(fā)現(xiàn)dropzone.js挺不錯(cuò)的，特地做個(gè)筆記。
dropzonejs 的官網(wǎng)是：http://www.dropzonejs.com/， 中文手冊(cè)是：http://wxb.github.io/dropzonejs.com.zh-CN/
自己寫的拖拽文件至一個(gè)按鈕上傳的功能，前端及java代碼如下：
jsp頁(yè)面：
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.自己定義兩個(gè)div區(qū)域
|
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> |
這是我的文件上傳之后的文件隊(duì)列區(qū)域：
|
1
|
<div id="fileslist" style="padding: 10px;"></div> |
3.對(duì)dropzone.css進(jìn)行修改，將文件內(nèi)的所有dropzone替換為dropz
修改文件拖拽區(qū)域的顯示樣式：
|
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 {/*設(shè)置拖拽上傳文件按鈕的格式*/ 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對(duì)div進(jìn)行dropzone參數(shù)的自定義
|
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,//最多上傳幾個(gè)文件 maxFilesize: 5,//文件的大小，單位是M addRemoveLinks:true,//是否有刪除文件的功能 dictRemoveFile:"",//刪除文件 previewsContainer:"#div2",//文件上傳進(jìn)度顯示的區(qū)域 acceptedFiles: ".jpg,.jpeg,.png,.gif,.xls,.txt,.sql,.rar,.mkv",//支持的格式 paramName:'file',//上傳的FILE名稱，即服務(wù)端可以通過(guò)此來(lái)獲取上傳的文件，如$_FILES['dropimage'] init: function() {//初始化時(shí)的事件 //$("#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后臺(tái)處理文件上傳的代碼：
注意這里的返回值是直接返回的json對(duì)象，如果采用
則會(huì)報(bào)錯(cuò):
復(fù)制代碼 代碼如下:
[com.framework.core.common.exception.MyExceptionHandler]org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
最終實(shí)現(xiàn)的效果如下：
更多使用功能請(qǐng)參考dropzone的官方文檔。 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。 原文鏈接：http://blog.csdn.net/crush1988/article/details/75131079 延伸 · 閱讀
精彩推薦
最近更新 編輯推薦
閱讀排行
|
