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

2015-04-12 12:42:33:  

一、概述

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

文件上传成功的回调方法

onFailurefunction(file){}文件上传错误的回调方法

onComplete

function(responseInfo){}

上传全部完成的回调方法


三、初始化示例

Html部分(demo.html):

<!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):

$(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




精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程