zyUpload界面绝佳、体验超棒的HTML5上传插件
一、概述
在 上一篇文章已经把zyFile骨骼部分讲完了，接下来要讲的是整个插件的血肉部分，zyUpload处理的东西比较多，比如：对文件格式、大小的过滤，设 置文件上传状态等。今天我把java版的源码放到了网盘上（/webContent/demo文件夹可以拿出来单独使用）。
我的整个项目的结构是这样的：
如果你想运行的话，直接打开/demo/demo.html文件就可以。
二、参数配置
| 属性或方法名 |
参数值或默认方法 |
释义 |
| width |
"" |
插件宽度 |
| 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){} |
上传全部完成的回调方法 |
三、初始化示例
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>
<!-- 引用初始化JS -->
<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