AliUploader是阿里巴巴技术团队开源的异步文件上传组件,支持ajax、iframe、flash三套方案,兼容多种浏览器,调用简单,内置多套主题支持和常用插件,比如验证、图片预览、进度条等。已广泛应用于淘宝网,比如退款系统、爱逛街、二手、拍卖、我的淘宝、卖家中心、导购中心等。扩展性强,可自己定制主题和插件。

组件快速上手

1.组件依赖的html结构

    <input type="file" class="g-u" id="J_UploaderBtn" value="上传文件" name="Filedata" accept="image/*"  >

组件的核心只依赖原生的文件上传域,value属性值为上传按钮的文案,name属性非常重要:服务器端获取文件数据的字段。

accept="image/*"属性可以在选择文件时过滤掉不支持上传的文件。

2.加载Uploader模块

    KISSY.use('kg/uploader/2.0.2/index', function (S, Uploader) {

    })

提醒:use()的回调,第一个参数是KISSY,第二个参数才是组件实例。

3.初始化Uploader

    KISSY.use('kg/uploader/2.0.2/index', function (S, Uploader) {
        var uploader = new Uploader('#J_UploaderBtn',{
          //处理上传的服务器端脚本路径
          action:"upload.php"
        });
    })

Uploader类接受二个参数:

  • 第一个参数指向目标元素(指向原生文件上传域元素即可)
  • 第二个参数为组件配置,action必须配置,为服务器端处理文件上传的路径。

 

4. 主题的使用

S.use('kg/uploader/2.0.2/index,kg/uploader/2.0.2/themes/default/index,kg/uploader/2.0.2/themes/default/style.css', function (S, Uploader,DefaultTheme) {
        var uploader = new Uploader('#J_UploaderBtn',{
                        //处理上传的服务器端脚本路径
                        action:"upload.php"
                    });
        //使用主题
        var defaultTheme = new DefaultTheme({ queueTarget:'#J_UploaderQueue' });
        uploader.theme(defaultTheme);
    })

第一步先要use()主题js和css,模块路径为kg/uploader/2.0.2/themes/default/indexkg/uploader/2.0.2/themes/default/index

第二步实例化主题:

var defaultTheme = new DefaultTheme({ queueTarget:'#J_UploaderQueue' });

queueTarget是必须配置的,指向队列容器:

    <ul id="J_JsUploaderQueue">

    </ul>

第三步使用uploader.theme()方法,将主题实例加入到uploader中。

uploader.theme(defaultTheme);

 

4. 服务器端返回的数据格式

建议服务端返回的数据格式如下:

   {"status":1,"type":"ajax","name":"[1343736002.749366]0.png","url":".\/files\/[1343736002.749366]0.png"}

 

服务器出错时返回的信息

   {"status":0,message":"图片过大!"}

下载信息

  • 名称:详细文档

点击下载