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!'}"; }