HTML5+ - 使用uploader模块进行文件上传

时间:2019-08-07 发布者: 访问量:4307

Uploader模块管理网络上传任务,用于从本地上传各种文件到服务器,并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据,数据格式符合Multipart/form-data规范,即rfc1867(Form-based File Upload in HTML)协议。

1、createUpload: 新建上传任务

功能:新建上传任务

Upload plus.uploader.createUpload( url, options, completedCB );

说明:请求上传管理创建新的上传任务,创建成功则返回Upload对象,用于管理上传任务。

参数:

1、1 url: ( String ) 必选 要上传文件的目标地址

上传服务器的url地址,仅支持http或https协议。 允许创建多个相同url地址的上传任务。


1、2 options: ( UploadOptions ) 
可选 上传任务的参数,可通过此参数设置定义上传任务属性,如请求类型、上传优先级等。

method: (String 类型 )网络请求类型
仅支持http协议的“POST”请求。
blocksize: (number 类型 )上传任务每次上传的文件块大小(仅在支持断点续传的服务有效)
数值类型,单位为Byte(字节),默认值为102400,若设置值小于等于0则表示不分块上传。
priority: (number 类型 )上传任务的优先级
数值类型,数值越大优先级越高,默认优先级值为0。
timeout: (number 类型 )上传任务超时时间
数值类型,单位为s(秒),默认值为120s。 超时时间为服务器响应请求的时间(不是上传任务完成的总时间),如果设置为0则表示永远不超时。
retry: (number 类型 )上传任务重试次数
数值类型,默认为重试3次。
retryInterval: (Number 类型 )上传任务重试间隔时间
数值类型,单位为s(秒),默认值为30s。

1、3 completedCB: ( UploadCompletedCallback ) 
可选 上传任务完成回调函数,当上传任务提交完成时触发,成功或失败都会触发。

参数:

upload: ( Upload ) 必选 上传任务对象

status: ( Number ) 必选 HTTP传输协议状态码,如果未获取传输状态则其值则为0,如上传成功其值通常为200。

返回值:Upload : Upload对象

function pickFile(){
   plus.gallery.pick(
      function(path){
         var task = plus.uploader.createUpload(
            'http://demo.hcoder.net/up.php',
            { method:"POST",blocksize:204800,priority:100},
            function (t,status){
               console.log(JSON.stringify(t));
               console.log(status);
            }
         );
         task.start();
      },
      function(e){mui.toast('取消了选择');}
   );
}

2、addFile添加上传文件

向上传任务中添加文件,必须在任务开始上传前调用。 以下情况会导致添加上传文件失败: 
1. options参数中指定的key在任务中已经存在,则添加失败返回false; 
2. path参数指定的文件路径不合法或文件不存在,则添加失败返回false; 
3. 上传任务已经开始调度,调用此方法则添加失败返回false。

参数:

path: ( String ) 必选 添加上传文件的路径

仅支持本地文件路径。

options: ( UploadFileOptions ) 必选 要添加上传文件的参数,可通过此参数设置上传任务属性,如文件标识、文件名称、文件类型等。

UploadFileOptions JSON对象,添加上传文件的参数

key 文件键名 说明:String 类型 可选属性 上传文件在上传任务中的键名,默认值为为文件名称。 上传任务中如果已经存在相同key的上传文件或数据将导致添加文件失败。
name 文件名称 说明:String 类型 可选属性 上传文件的名称,默认值为上传文件路径中的名称。
mime 文件类型 说明:String 类型 上传文件的类型(如图片文件为“image/jpeg”),默认值自动根据文件后缀名称生成。

返回值:Boolean : 添加文件成功返回true,失败则返回false。


多文件上传演示

function pickFile(){
    plus.gallery.pick(
        function(paths){
            plus.nativeUI.showWaiting();
            var task = null;
            task = plus.uploader.createUpload(
                'http://demo.hcoder.net/up.php',
                { method:"POST",priority:100},
                function (t,status){
                    plus.nativeUI.closeWaiting();
                    console.log(t.responseText);
                    mui.toast('上传成功');
                }
            );
            for(i in paths.files){
                task.addFile(paths.files[i],{key:'uper'+i,'name':paths.files[i].substr(paths.files[i].lastIndexOf('/'))});
            }
            task.start();
        },
        function(e){mui.toast('取消了选择');},{multiple:true,maximum:5}
    );
}

服务器端示例代码(php版):

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $fs=array();
    foreach ( $_FILES as $name=>$file ) {
        if(move_uploaded_file($file['tmp_name'],$file['name'])){
            $fs[$name]=array('name'=>$name,'url'=>$file['name'],'type'=>$file['type'],'size'=>$file['size']);
        }else{
            $fs[$name]=array('name'=>$name,'url'=>'error','type'=>$file['type'],'size'=>$file['size']);
        }
    }
    echo json_encode($fs);
}else{
    echo "{'error':'Unsupport GET request!'}";
}
发布于
  用户评论
    生活编程