Pure JS (3.2)： 上传下载 （HTML5 与 Flash 上传实现，配置项说明）

Pure JS (3.2)： 上传下载 （HTML5 与 Flash 上传实现，配置项说明）

　　接着上一篇文章的话题，本文主要讲解 HTML5 方式的上传，FLash 方式上传客户端的实现，并说明 pure.upload 组件的配置项。
　　服务器端的实现在上一篇文章已经说明过了，这里就不再重复了。

HTML5 方式上传

　　HTML5方式上传，实际上是解决将文件数据放在请求的 body 中，而不使用 mutipart/form-data 格式进行封装。

　　实现思路如下：
　　1. 创建 XMLHttpRequest 对象
　　2. 配置上传进程中的回调函数
　　3. 配置上传完成时的回调函数
　　4. 开始上传

　　具体实现如下：

			upload: function(id, params){
				// 根据 id 获取文件
				var file = files[id], name = file.name,size = file.size;

				// 创建 XMLHttpRequest
				xhrs[id] = new XMLHttpRequest();

				// 配置上传进程中的回调函数
				xhrs[id].upload.onprogress = function(e){
					if (e.lengthComputable){
						onUploadProgress(id, name, e.loaded, e.total)
					}
				};

				//  配置上传完成时的回调函数
				xhrs[id].onreadystatechange = function(){			
					if (xhrs[id].readyState == 4){
						if (!files[id]) return;
						onUploadProgress(id, name, size, size);
						var response = $.parseJSON(xhrs[id].responseText);
						onUploadComplete({id:id, name: name, size:size}, response);
						delete files[id];
						delete xhrs[id];	   
					}
				};

				// 设置上传参数，并生成上传 URL
				params.Filedata = name;
				var action = options.action + '?' + $.param(params);

				// 开始上传
				xhrs[id].open('POST', action, true);
				xhrs[id].setRequestHeader('X-Requested-With', 'XMLHttpRequest');
				xhrs[id].setRequestHeader('Content-Type', 'application/octet-stream');
				xhrs[id].send(file);
			}

Flash 方式上传

　　Flash 方式上传需要结合使用 ActionScript 和 JavaScript，利用 ActionScript 的 ExternalInterfate 进行交互。

　　ActionScript 部分的实现思路如下：
　　1. 遍历从文件选择对话框中选取的文件
　　2. 配置上传进程中的回调函数
　　3. 配置上传完成时的回调函数
　　4. 利用获得的 FileReference 的 upload 方法进行上传。

　　具体实现如下：

		private function upload(files:Array):void {
			// 遍历从文件选择对话框中选取的文件
			eachFile(function(file:FileReference, i:Number):void {
				var id:Number = files[i].id;
				uploadingFiles[id] = file;

				// 配置上传进程中的回调函数
				file.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {
					call("onProgress", { id: id, loaded: e.bytesLoaded, total: e.bytesTotal });
				});

				// 配置上传完成时的回调函数
				file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function(e:DataEvent):void {
					delete uploadingFiles[id];
					call("onComplete", { file: files[i], result: e.data } );
				});

				// 利用获得的 FileReference 的 upload 方法进行上传
				file.upload(new URLRequest(params.url));
			});
		}

　　JavaScript 部分需要将注册到 Flash 的函数调用映射到不同上传方式共用的函数。

　　具体实现如下：

			callbacks: {
				// Other codes ...

				// 将上传进程回调函数映射到 onUploadProgress(...)
				onProgress: function(o) {
					onUploadProgress(o.id, null, o.loaded, o.total);
				},

				// 将上传完成时的回调函数映射到 onUploadComplete(...)
				onComplete: function(o) {					
				   	onUploadComplete(o.file, $.parseJSON(o.result));
				   	delete sizeArray[o.file.id];
				}			
			}

配置项

　　上一遍文章中已经提到了 pure.upload 用法：

pure.upload({  
    element: $uploader[0],  
    action: 'api',  
    params: { action: 'upload' },  
    sizeLimit: 1000 * 1024 * 1024,  
    onComplete: function(file, data){  
        // Do more after upload complete ...   
    }  
});

　　这里传给 upload 的 object 的属性就是配置项了。


　　【基本配置项】
　　element： 上传组件的容器，可以是 div 或 span
　　action： 上传 URL
　　params： object，表示发送到服务器端的额外参数
　　sizeLimit： 上传总大小限制
　　template： HTML 片段，作为上传组件的模板，其中 {tip} 表示提示信息
　　fileTemplate： HTML 片段，作为正在上传的文件条目的模板

　　【回调函数】
　　allowedExtensions： 表示允许的扩展名
　　onSubmit(id, fileName)： 开始上传的回调函数
　　onComplete(file, data)： 上传完成时的回调函数
　　showMessage： 显示信息的方式，默认为 alert(message)


　　【消息配置】

　　用 messages 属性（object类型）进行消息配置。
　　可配置的消息包括：

　　typeError： 文件类型错误，默认为 '{file} has invalid extension. Only {extensions} are allowed.'
　　sizeError： 文件大小错误，默认为 'Total size is too large, maximum size is {sizeLimit}.'
　　emptyError： 文件为空时的错误，默认为 '{file} is empty, please select files again without it.'
　　onLeave： 文件正在上传时离开页面的提示，默认为 'The files are being uploaded, if you leave now the upload will be cancelled.'
　　sizeTip： 文件大小限制提示信息，默认为  'Maximum total size is {sizeLimit}. '
　　ddTip： 拖拽支持提示，默认为 'Drag and Drop is Supported.'



　　【CSS Class 配置】

　　用 classes 属性（object类型） 配置上传组件对应的各部件的 CSS Class。

　　button： 上传按钮，默认为 'pure-upload-button'
　　drop： 拖拽区域，默认为 'pure-upload-drop-area'
　　dropActive： 鼠标滑入时的拖拽区域，默认为 'pure-upload-drop-area-active'
　　list： 上传中的文件列表，默认为 'pure-upload-list'
　　file： 上传中的文件名称，默认为 'pure-upload-file'
　　spinner： 上传中的文件的进度条，默认为 'pure-upload-spinner'
　　size： 上传中的文件大小，默认为 'pure-upload-size'
　　cancel： 取消上传的链接，默认为 'pure-upload-cancel'
　　buttonFocus： 焦点位于上传按钮时的样式，默认为 'pure-upload-button-focus'
　　buttonHover： 鼠标滑过上传按钮时的样式，默认为 'pure-upload-button-hover'


　　【Flash 属性配置】

　　用 flashSettings 属性（object类型） 配置 flash 上传按钮

　　swfPath： swf 文件路径，默认为 'swf/pure.upload.swf',
　　url： 上传 url，默认为 options.action + '?' + $.param(options.params),
　　image： flash 按钮图片路径，默认为 'images/pure.upload.png',
　　width： 按钮宽度，默认为 107
　　height： 按钮高度，默认为 31
　　text： 文字，默认为 'Upload a file',
　　textStyle： 文字样式，默认为 'font-family: Arial; font-size: 12px',
　　textTop： 文字上方开始位置，默认为 6
　　textLeft： 文字左边开始位置，默认为 17

　　【返回对象支持的方法】

　　通过pure.upload(...)方法返回的对象支持以下方法：

　　reset()：  重置uploader
　　uploading()： 检查是否有文件还在上传中