文档章节

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

Danny_ken
 Danny_ken
发布于 2015/12/14 14:38
字数 864
阅读 557
收藏 6
点赞 0
评论 0

一、概述

在 上一篇文章已经把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
博文 20
码字总数 6075
作品 0
广州
程序员
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia

花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder 传送门: https://xiangyuecn.git...

高坚果兄弟 ⋅ 05/16 ⋅ 0

jQuery文件上传插件Uploadify(转)

一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列。 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用。 由于官方提供的版本是flash免费,html5版本...

easonjim ⋅ 2017/01/05 ⋅ 0

CKeditor的爬坑之旅:vue项目下选择媒体库图片

最近在用vue写项目的管理后台,由于是电商+cms项目,所以我们开发了媒体库来管理所有的素材,但是问题来了,在发布文章的时候,我是用了开源的ckeditor,原来带的选择图片上传插件,只能自定...

unfind ⋅ 05/19 ⋅ 0

Chrome将在年底前彻底屏蔽Adobe Flash

各家软件厂商对于Adobe Flash的态度越来越强硬,包括谷歌在内。现在谷歌拿出了目前最强硬的手段来遏制Adobe Flash的继续推行,那就是屏蔽Adobe Flash内容。 谷歌日前计划在今年年底之前将HTM...

玄学酱 ⋅ 05/18 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

php canvas 前端JS压缩,获取图片二进制流数据并上传

效果图(canvas压缩图片会失真): 参考: php canvas 前端JS压缩,获取图片二进制流数据并上传 https://www.cnblogs.com/-mrl/p/8708114.html js+php如何实现上传图片 https://www.jianshu....

豆花饭烧土豆 ⋅ 05/30 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

HTML5 SVG 设计开源软件macSVG

macSVG是一款Mac OS平台下的HTML5网页设计及SVG 设计开源软件, 基于WebKit的用户界面, 包括Web检查器,可为桌面和移动平台上的HTML5 以及可缩放矢量图形视图生成动态,高质量图形和动画。 特...

marsdream ⋅ 05/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

一张图看懂CDN全站加速产品解决方案

原文链接 本文为云栖社区原创内容,未经允许不得转载。

阿里云云栖社区 ⋅ 15分钟前 ⋅ 0

一张图看懂CDN全站加速产品解决方案

原文链接

猫耳m ⋅ 16分钟前 ⋅ 0

开启Swarm集群以及可视化管理

在搭建的两台coreos服务器上开启swarm集群 前置条件: docker均开启2375端口 同一个局域网内 主服务器上安装Portainer容器 安装Portainer容器执行: docker run -d -p 9000:9000 --restart=a...

ykbj ⋅ 33分钟前 ⋅ 0

单例设计模式

1、单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例 2、饿汉式单例类 在这个类被加载时,静态变量instance会被初始化,此时类的私有构造子会被调用 饿汉式是典型...

职业搬砖20年 ⋅ 38分钟前 ⋅ 0

前端基础(四):前端国际规范收集

字数:1142 阅读时间:5分钟 前言 由于前端技术的灵活性和杂乱性,导致网上的许多解决方案不够全面甚至是完全错误,容易起到误导作用。所以,我对搜索到的解决方案往往是存疑态度。那么,如何...

老司机带你撸代码 ⋅ 40分钟前 ⋅ 0

Failed to open/create Network-VirtualBox Host-Only

虚拟机版本 : Oracle Vm VirtualBox 5.2.12 报错时机:开网卡二,重启虚拟机报错 "Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Ada......

p至尊宝 ⋅ 44分钟前 ⋅ 0

springMVC接收表单时 Bean对象有Double Int Char类型的处理

前台ajax提交表单price为double类型 后台controller就介绍不到 400错误 前台 实体类: public class ReleaseMapIconConfig{ private String id; private long maxValue; private long minVal......

废柴 ⋅ 49分钟前 ⋅ 0

ZOOKEEPER安装

工作需要在ubuntu上配置了一个zookeeper集群,有些问题记录下来。 1. zookeeper以来java,所以首先要安装java。但是ubuntu系统有自带的jdk,需要通过命令切换java版本: $ sudo update-alter...

恰东 ⋅ 52分钟前 ⋅ 0

linux 进程地址空间的一步步探究

我们知道,在32位机器上linux操作系统中的进程的地址空间大小是4G,其中0-3G是用户空间,3G-4G是内核空间。其实,这个4G的地址空间是不存在的,也就是我们所说的虚拟内存空间。 那虚拟内存空间...

HelloRookie ⋅ 52分钟前 ⋅ 0

myatis #{}与${}区别及原理

https://blog.csdn.net/wo541075754/article/details/54292751

李道福 ⋅ 55分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部