zyUpload界面絕佳、體驗超棒的HTML5上傳插件

時間 2019-11-12

標籤 zyupload 界面絕佳體驗 html5 html 上傳插件欄目 HTML5 简体版

原文原文鏈接

1、概述 javascript

在上一篇文章已經把zyFile骨骼部分講完了，接下來要講的是整個插件的血肉部分，zyUpload處理的東西比較多，好比：對文件格式、大小的過濾，設置文件上傳狀態等。今天我把java版的源碼放到了網盤上（/webContent/demo文件夾能夠拿出來單獨使用）。 css

個人整個項目的結構是這樣的： html

若是你想運行的話，直接打開/demo/demo.html文件就能夠。 html5

2、參數配置 java

屬性或方法名 jquery	參數值或默認方法 web	釋義 url
width	""	插件寬度 spa
height	""	插件高度插件
itemWidth	""	每個預覽區域的寬度
itemHeight	""	每個預覽區域的高度
url	""	上傳文件的路徑
onSelect	function(selectFiles, files){}	選擇文件的回調方法 selectFile:當前選中的文件 allFiles:還沒上傳的所有文件
onDelete	function(file, files){}	刪除一個文件的回調方法 file:當前刪除的文件 files:刪除以後的文件
onSuccess	function(file){}	文件上傳成功的回調方法
onFailure	function(file){}	文件上傳錯誤的回調方法
onComplete	function(responseInfo){}	上傳所有完成的回調方法

3、初始化示例

Html部分（demo.html）：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>上傳</title>

<link rel="stylesheet" href="control/css/zyUpload.css" type="text/css">

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript" src="core/zyFile.js"></script>

<script type="text/javascript" src="control/js/zyUpload.js"></script>

<script type="text/javascript" src="demo.js"></script>

</head>

<body>

<h1 style="text-align:center;">zyFile示例</h1>

<div id="demo" class="demo"></div>

</body>

</html>

js腳本部分（demo.js）：

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

$(function(){

// 初始化插件

$("#demo").zyUpload({

width : "650px", // 寬度

height : "400px", // 寬度

itemWidth : "120px", // 文件項的寬度

itemHeight : "100px", // 文件項的高度

url : "/upload/UploadAction", // 上傳文件的路徑

multiple : true, // 是否能夠多個文件上傳

dragDrop : true, // 是否能夠拖動上傳文件

del : true, // 是否能夠刪除文件

finishDel : false, // 是否在上傳文件完成後刪除預覽

/* 外部得到的回調接口 */

onSelect: function(selectFiles, allFiles){ // 選擇文件的回調方法 selectFile:當前選中的文件 allFiles:還沒上傳的所有文件

console.info("當前選擇瞭如下文件：");

console.info(selectFiles);

},

onDelete: function(file, files){ // 刪除一個文件的回調方法 file:當前刪除的文件 files:刪除以後的文件

console.info("當前刪除了此文件：");

console.info(file.name);

},

onSuccess: function(file, response){ // 文件上傳成功的回調方法

console.info("此文件上傳成功：");

console.info(file.name);

},

onFailure: function(file, response){ // 文件上傳失敗的回調方法

console.info("此文件上傳失敗：");

console.info(file.name);

},

onComplete: function(response){ // 上傳完成的回調方法

console.info("文件上傳完成");

console.info(response);

}

});

});

到此爲止，算是把整個上傳插件講解完成，在這裏也十分感謝你的關注，過幾天以後我會繼續開發加強版的上傳，會涉及到圖片截取，html5拍照等等，總之，你們一塊兒進步吧。

zyUpload JavaScript版實例代碼：

http://yun.baidu.com/share/link?shareid=3705093182&uk=2972370755

zyUpload JAVA版實例代碼:

http://yun.baidu.com/share/link?shareid=3707308326&uk=2972370755

zyUpload PHP版實例代碼:

http://yun.baidu.com/share/link?shareid=3709895291&uk=2972370755

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<