文档章节

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

Danny_ken
 Danny_ken
发布于 2015/12/14 14:38
字数 864
阅读 1.8K
收藏 7

「深度学习福利」大神带你进阶工程师,立即查看>>>

一、概述

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

Danny_ken
粉丝 1
博文 28
码字总数 6075
作品 0
广州
程序员
私信 提问
加载中
请先登录后再评论。
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
7.6K
8
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
mvc框架--Razor

Razor 是一个轻巧而优雅的servlet mvc框架 # 又一个轮子? no,写就她是为了证实我个人的某些想法,并在这个过程中练练手,这两种冲动碰撞在一起,自然而然地产生了Razor # Razor的现在和未来...

dtubest
2013/01/25
3.1K
0
HTTPS切换工具--HttpsSwitcher

HttpsSwitcher 是一个帮你进行 HTTPS 切换的 Chrome 插件,本工具可以帮你尝试使用https打开指定的域名,点击本插件的浏览器图标后会自动切换本标 签页的http/https状态,并且会记住你的选择...

leehorsley
2013/01/26
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

02-敏捷的核心价值观

敏捷金字塔 敏捷所包含的知识领域可以概括为一个金字塔结构,金字塔的最底层,也就是一切的根基是敏捷的核心价值观,也就是著名的《敏捷宣言》,中间支撑的部分是敏捷的12项原则,而最顶层则...

杨久成
06/18
0
0
你还不知道 OpenGL ES 和 EGL 的关系?

什么是 EGL EGL 是 OpenGL ES 和本地窗口系统(Native Window System)之间的通信接口,它的主要作用: 与设备的原生窗口系统通信; 查询绘图表面的可用类型和配置; 创建绘图表面; 在OpenG...

ByteFlow
今天
5
0
Asp.net Core 微信小程序支付

最近要做一个微信小程序支付的功能 在网上找了一下 .net Core做微信支付的博客 和 demo 几乎没有 自己研究了好几天 参考了 很多 大牛的博客 勉强做出来了 因为参数都没有 比如 opid 小程序域...

osc_ix000whh
19分钟前
0
0
腾讯云 Serverless 衔接 Kafka 上下游数据流转实战

导语:腾讯云 CKafka 作为大数据架构中的关键组件,起到了数据聚合,流量削峰,消息管道的作用。在 CKafka 上下游中的数据流转中有各种优秀的开源解决方案。如 Logstash,File Beats,Spark...

腾讯云中间件
昨天
0
0
「真香警告」鱼头手摸手教你在小程序里用composition-api

使用 使用起来应该像是这个样子 wxue(options) setup 配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下 import { wxue, rea...

陈大鱼头
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部