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/index和kg/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":"图片过大！"}

[repo owner=”kissygalleryteam” name=”uploader”]