uploader上传

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

方法：

createUpload: 新建上传任务
enumerate: 枚举上传任务
clear: 清除上传任务
startAll: 开始所有上传任务

对象：

Upload: Upload对象管理一个上传任务
UploadEvent: 上传任务事件类型
UploadState: 上传任务的状态，Number类型
UploadOptions: JSON对象，创建上传任务的参数
UploadFileOptions: JSON对象，添加上传文件的参数

回调方法：

UploadCompletedCallback: 上传任务完成时的回调函数
UploadStateChangedCallback: 上传任务状态变化回调函数，在上传任务状态发生变化时调用
UploadEnumerateCallback: 枚举上传任务回调函数，在枚举上传任务完成时时调用

权限：

5+功能模块（permissions）

{
// ...
"permissions":{
	// ...
	"Uploader": {
		"description": "文件上传，管理文件上传任务"
	}
}
}

Upload

Upload对象管理一个上传任务

interface Upload {
	readonly attribute String url;
	readonly attribute Number state;
	readonly attribute UploadOptions options;
	readonly attribute String responseText;
	readonly attribute Number uploadedSize;
	readonly attribute Number totalSize;
	function void abort();
	function Boolean addData( String key, String value );
	function void addEventListener( String event, function Callback listener, Boolean capture );
	function Boolean addFile( String path, UploadFileOptions options );
	function String getAllResponseHeaders();
	function String getResponseHeader( headerName );
	function void pause();
	function void resume();
	function void setRequestHeader( String headerName, String headerValue );
	function void start();
}

属性：

id: 上传任务的标识
url: 上传文件的服务器地址
state: 任务的状态
options: 上传任务的参数
responseText: 上传任务完成后服务器返回的数据
uploadedSize: 已完成上传数据的大小）
totalSize: 上传数据的总大小

方法：

addFile: 添加上传文件
addData: 添加上传数据
start: 开始上传任务
pause: 暂停上传任务
resume: 恢复暂停的上传任务
abort: 取消上传任务
addEventListener: 添加上传任务事件监听器
getAllResponseHeaders: 获取上传请求HTTP响应头部信息
getResponseHeader: 获取上传请求指定的HTTP响应头部的值
setRequestHeader: 设置上传请求的HTTP头数据

UploadEvent

上传任务事件类型

常量：

statechanged: _(String 类型 )_上传任务状态变化事件

当上传任务状态发生变化时触发此事件，事件原型参考UploadStateChangedCallback。

UploadState

上传任务的状态，Number类型

常量：

undefined: _(undefined 类型 )_上传任务未开始

通过plus.uploader.createUpload()方法创建上传任务后的初始状态，此时可调用其start()方法开始上传。
0: _(number 类型 )_上传任务开始调度

调用上传任务的start()方法之后处于此状态，此时上传任务处于可调度上传状态。
1: _(number 类型 )_上传任务开始请求

上传任务建立网络连接，发送请求到服务器并等待服务器的响应。
2: _(number 类型 )_上传任务请求已经建立

上传任务网络连接已建立，服务器返回响应，准备传输数据内容。
3: _(number 类型 )_上传任务提交数据

上传任务提交数据，监听statechanged事件时可多次触发此状态。
4: _(number 类型 )_上传任务已完成

上传任务完成数据提交并断开连接，上传成功或失败都会设置为此状态。
5: _(number 类型 )_上传任务已暂停

调用上传任务的pause()方法将任务暂停，此时可调用其resume()方法重新开始上传。
-1: _(number 类型 )_枚举任务状态

非上传任务状态，泛指所有上传任务的状态，用于enumerate()和clear()操作时指定作用于所有上传任务。

UploadOptions

JSON对象，创建上传任务的参数

属性：

method: _(String 类型 )_网络请求类型

仅支持http协议的“POST”请求。
blocksize: _(number 类型 )_上传任务每次上传的文件块大小（仅在支持断点续传的服务有效）

数值类型，单位为Byte（字节），默认值为102400，若设置值小于等于0则表示不分块上传。
priority: _(number 类型 )_上传任务的优先级

数值类型，数值越大优先级越高，默认优先级值为0。
timeout: _(number 类型 )_上传任务超时时间

数值类型，单位为s(秒)，默认值为120s。超时时间为服务器响应请求的时间（不是上传任务完成的总时间），如果设置为0则表示永远不超时。
retry: _(number 类型 )_上传任务重试次数

数值类型，默认为重试3次。
retryInterval: _(Number 类型 )_上传任务重试间隔时间

数值类型，单位为s(秒)，默认值为30s。

UploadFileOptions

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

属性：

key: 文件键名
name: 文件名称
mime: 文件类型

UploadCompletedCallback

上传任务完成时的回调函数

void uploadCompleted( Upload upload, Number status ) {
	// File upload completed code.
}

说明：

在上传任务完成时调用，上传任务失败也将触发此回调。

参数：

upload: ( Upload ) 必选 上传任务对象
status: ( Number ) 必选 上传结果状态码
HTTP传输协议状态码，如果未获取传输状态则其值则为0，如上传成功其值通常为200。

返回值：

void : 无

UploadStateChangedCallback

上传任务状态变化回调函数，在上传任务状态发生变化时调用

void onStateChanged( Upload upload, status ) {
	// Upload state changed code.
}

参数：

upload: ( Upload ) 必选 上传任务对象
status: ( Number ) 必选 上传结果状态码
HTTP传输协议状态码，如果未获取传输状态则其值则为0，如上传成功其值通常为200。

返回值：

void : 无

UploadEnumerateCallback

枚举上传任务回调函数，在枚举上传任务完成时时调用

void onEnumerated( Upload\[\] uploads ) {
	// Upload enumerate completed code.
}

参数：

uploads: ( Array[ Upload ] ) 必选 枚举到的上传任务对象数组

返回值：

void : 无

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript">
			var server = "http://demo.dcloud.net.cn/helloh5/uploader/upload.php";
			var files = [];
			// 上传文件
			function upload() {
				if (files.length <= 0) {
					plus.nativeUI.alert("没有添加上传文件！");
					return;
				}
				console.log("开始上传：")
				var wt = plus.nativeUI.showWaiting();
				var task = plus.uploader.createUpload(server, {
						method: "POST"
					},
					function (t, status) { //上传完成
						if (status == 200) {
							outLine("上传成功：" + t.responseText);
							plus.storage.setItem("uploader", t.responseText);
							var w = plus.webview.create("uploader_ret.html", "uploader_ret.html", {
								scrollIndicator: 'none',
								scalable: false
							});
							w.addEventListener("loaded", function () {
								wt.close();
								w.show("slide-in-right", 300);
							}, false);
						} else {
							outLine("上传失败：" + status);
							wt.close();
						}
					}
				);
				task.addData("client", "HelloH5+");
				task.addData("uid", getUid());
				for (var i = 0; i < files.length; i++) {
					var f = files[i];
					task.addFile(f.path, {
						key: f.name
					});
				}
				task.start();
			}
			// 拍照添加文件
			function appendByCamera() {
				plus.camera.getCamera().captureImage(function (p) {
					appendFile(p);
				});
			}
			// 从相册添加文件
			function appendByGallery() {
				plus.gallery.pick(function (p) {
					appendFile(p);
				});
			}
			// 添加文件
			var index = 1;

			function appendFile(p) {
				var fe = document.getElementById("files");
				var li = document.createElement("li");
				var n = p.substr(p.lastIndexOf('/') + 1);
				li.innerText = n;
				fe.appendChild(li);
				files.push({
					name: "uploadkey" + index,
					path: p
				});
				index++;
				empty.style.display = "none";
			}
			// 产生一个随机数
			function getUid() {
				return Math.floor(Math.random() * 100000000 + 10000000).toString();
			}

		</script>

	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Uploader</div>
			<div class="nvbt idoc" onclick="openDoc('Uploader Document','/doc/uploader.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br />
			<p class="heading">上传文件列表：</p>
			<ul id="files" style="text-align:left;">
				<p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p>
			</ul>
			<table style="width:100%;">
				<tbody>
					<tr>
						<td style="width:40%">
							<div class="button button-select" onclick="appendByCamera()">拍照</div>
						</td>
						<td style="width:40%">
							<div class="button button-select" onclick="appendByGallery()">相册选取</div>
						</td>
					</tr>
				</tbody>
			</table>
			<br />
			<div class="button" onclick="upload()">上 传</div>
			<br />
			<!--<ul class="dlist">
				<li class="ditem" onclick="appendByCamera()">拍照添加文件</li>
				<li class="ditem" onclick="appendByGallery()">相册添加文件</li>
			</ul>-->
		</div>
		<div id="output">
			Uploader用于管理文件的上传，用于从本地上传各种文件到网络服务器，支持跨域访问操作。
		</div>
	</body>

</html>

html5+ Uploader-上传

uploader上传

方法：

对象：

回调方法：

权限：

Upload

属性：

方法：

UploadEvent

常量：

UploadState

常量：

UploadOptions

属性：

UploadFileOptions

属性：

UploadCompletedCallback

说明：

参数：

返回值：

UploadStateChangedCallback

参数：

返回值：

UploadEnumerateCallback

参数：

返回值：

猜你喜欢