upload

Module

Method

io.upload()
XHR upload ( url , form , [ data , callback , dataType ] )
发送 jsonp 请求,将返回 json 信息作为第一个参数调用 callback 回调.
Parameters:
  • url (string) – 请求地址
  • form (HTMLElement|string) – 表单元素,字符串表示 css3 选择器

Note

form 参数代表的 form 节点中如果有 input type=’file’ 的节点会自动启用 iframe-upload 模式,否则收集 form 内 input 数据启用普通 xhr 模式.

Note

form 参数用户文件上传时请设置 type:’post’.

Parameters:
  • data (Object|string) – 请求附带的参数,参见 data .
  • callback (function) – 请求成功后的回调,参见 success .
  • dataType (string) – 传到回调函数作为参数的数据类型,参见 dataType
Returns:

代表本次请求的 xhrObj

Return type:

XhrObj

XHR upload ( url , form,[ callback , dataType ] )
data 可忽略,同上个函数描述.

实际上该函数是 IO 的 shortcut

IO.upload = function(url, form, data, callback, dataType) {
    if (S.isFunction(data)) {
        dataType = callback;
        callback = data;
        data = null;
    }
    return new IO({
        url:url,
        type:'post',
        dataType:dataType,
        form:form,
        data:data,
        success:callback
    });
};

Demo

向 doUpload.html 上传文件并读取 json 响应

<!DOCTYPE html>
<html>
<head>
    <style>
        button { margin:10px; }
        div { color:blue; font-weight:bold; }
        span { color:red; }
    </style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
  <button id='up'>upload to doUpload.html</button>
  <form method='post' enctype='multipart/form-data' id='f'>
        <input name='user' value='yiminghe'/>
  </form>

<script>
    KISSY.use('node,io',function (S,Node,IO) {
        var $=Node.all;
        $("#up").on("click",function(){
            IO.upload("doUpload.php","#f",function(d){
                alert("user : "+d.user+" \n email : "+d.email);                
            },"json");                                            
        });
    });
</script>

</body>
</html>

Note

使用自定义按钮模拟 file input 时,注意请将 file input 设置透明覆盖在自定义按钮上面。

不要:

// <button id='myFileUploadButton'>
// <input type='file' id='nativeFile'>
// 不要这样做
KISSY.all('#myFileUploadButton').on('click',function(){
    KISSY.get('#nativeFile').click();
});