文档章节

zyUpload界面绝佳、体验超棒的HTML5上传插件

Danny_ken
 Danny_ken
发布于 2015/12/14 14:38
字数 864
阅读 639
收藏 6

一、概述

在 上一篇文章已经把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

本文转载自:http://www.52doit.com/doit/show/344

共有 人打赏支持
Danny_ken
粉丝 1
博文 28
码字总数 6075
作品 0
广州
程序员
私信 提问
分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15 来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。尤...

gbin1
2011/12/21
3.5K
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
极客Web前端开发资源大荟萃#001

每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级、中级、还是正在进修的高级前端工程师。这里都将帮助你得到更多更高效...

gbin1
2014/08/05
1
0
精挑细选 8款HTML5/jQuery应用助网站走向高上大

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少...

yykj
2014/04/03
954
1
10 个超棒的 jQuery 视频插件

jQuery 有成千上万的插件,这些插件不但在 WEB 程序层面让我们工作得得心应手,而且还在 WEB 视觉方面表现炫酷~如果你在寻找基于在线的视频解决方案或者你想给你的网站添加视频,基于 jQuery...

oschina
2015/06/06
8.6K
14

没有更多内容

加载失败,请刷新页面

加载更多

Android 报错 Could not find com.android.tools.build:aapt2:3.2.1-4818971.

报错信息: Could not find com.android.tools.build:aapt2:3.2.1-4818971.Searched in the following locations: file:/C:/Users/96110/AppData/Local/Android/Sdk/extras/m2reposito......

lanyu96
17分钟前
1
0
我的Linux系统九阴真经

我的Linux系统九阴真经 在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行...

linuxCool
今天
20
0
Python程序员需要知道的30个技巧

1 直接交换两个数字位置 1x, y = 10, 202print(x, y)3x, y = y, x4print(x, y)5#1 (10, 20)6#2 (20, 10) 2 比较运算符的链接 1n = 102result = 1 < n < 203print(result)4# True5result = 1 ......

糖宝lsh
今天
12
0
[LintCode] Linked List Cycle(带环链表)

描述 给定一个链表,判断它是否有环。 样例 给出 -21->10->4->5, tail connects to node index 1,返回 true。 这里解释下,题目的意思,在英文原题中,tail connects to node index 1 表示的...

honeymose
今天
14
0
Nginx平滑添加模块

Nginx已经编译安装并运行了一段时间, 然后某一天, 发现需要用到某个模块但当初没有编译, 这个时候怎么办呢? 卸载重新安装肯定可以的, 如果Nginx版本没有变更的话, 则有一个相对平滑的方法来添...

老菜鸟0217
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部