jswh
9/14/2015 - 1:36 AM

upyun upload jquery plugin 又拍上传插件

upyun upload jquery plugin 又拍上传插件

uploader.js
content_copyfile_download
/**
 * 使用方式
 * 1 准备一个div，e.g.<div id="pic"></div>
 * 2 初始JUploader.init('#pic', initOption, 'my-input-style-class');
 * var initOption {
 *		serverUrl	: STRING, //服务器地址
 *		policy		: STRING,
 *		signature	: STRING
 * }
 * 3 上传 JUploader.upload(callback);
 * var callback = {
 *	complete    : function(fileServerResponse), //单个文件上传完成callBack
 *	allComplete : function, //全部文件上传完成callback
 *	error       : function
 * }
 **/
void function () {
	var _size = 10;
	var _inputId = 'J-upload-file-input';
	var _imageConfig = null;
	var _uploadFile = function (files, options) {
		var count = 0;
		var mount = files.length < _size ? files.length : _size;
		for(var i = 0; i < mount; ++i) {
			(function() {
				var file = files.item(i);
				var formData = new FormData();
				formData.append('file', file);
				formData.append('policy', _imageConfig.policy);
				formData.append('signature', _imageConfig.signature);
				$.ajax({
					type:'POST',
					url:_imageConfig.serverUrl,
					data:formData,
					contentType:false,
					processData:false,
					complete:function(res) {
						++count;
						var re = JSON.parse(res.responseText);
						if (re.code == 200) {
							options.complete(re, re.url);
							if(count == files.length) {
								options.allComplete();
							}
						} else if(options.error) {
							option.error(re);
						}
					}
				});
			})();
		}
	};

	window.JUploader = {
		isSupported : function () {
			return (typeof FormData === 'function');
		},
		init : function (container, uploadInfo, inputClass) {
			if(!this.isSupported()) {
				throw 'not supported';
			}
			if(!uploadInfo.serverUrl || !uploadInfo.policy || !uploadInfo.signature) {
				throw 'uploadInfo is not completed';
			}
			_imageConfig = uploadInfo;
			var $input = $('<input type="file" name="' + _inputId + '" id="' + _inputId + '" multiple="multiple">');
			if(inputClass) {
				$input.addClass(inputClass);
			}
			$(container).append($input);
		},
		resetImageConfig : function (uploadInfo) {
			if(!uploadInfo.serverUrl || !uploadInfo.policy || !uploadInfo.signature) {
				throw 'uploadInfo is not completed';
			}
			_imageConfig = uploadInfo;
		},
		setMaxFileNumbers : function(size) {
			_size = size;
		},
		upload: function (options) {
			if(!_imageConfig) {
				throw 'uploader is not inited'
			}
			var files = document.getElementById(_inputId).files;
			_uploadFile(files, options);
		}
	};
}();
index.html
content_copyfile_download
<!DOCTYPE>
<html>
	<head>
		<script src='uploader.js'></script>
		<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
	</head>
	<div></div>
	<button>upload</button>
	<script>
		JUploader.init('div', {
			'serverUrl' : 'http://v0.api.upyun.com//',
			'policy' : 'eyJidWNrZXQiOiJieGltZyIsInNhdmUta2V5IjoiL3tmaWxlbWQ1fXsuc3VmZml4fSIsImNvbnRlbnQtc2VjcmV0Ijoib3JpZ2luYWwiLCJjb250ZW50LWxlbmd0aC1yYW5nZSI6IjAsMTA0ODU3NjAiLCJ4LWdta2VybC10eXBlIjoiZml4X21heCIsIngtZ21rZXJsLXZhbHVlIjoiNjQwIiwieC1nbWtlcmwtbm9pY2MiOiJ0cnVlIiwieC1nbWtlcmwtcXVhbGl0eSI6Ijc1IiwieC1nbWtlcmwtcm90YXRlIjoiYXV0byIsIngtZ21rZXJsLWV4aWYtc3dpdGNoIjoidHJ1ZSIsIm5vdGlmeS11cmwiOiJodHRwOi8vaW1nLmJhaXhpbmcubmV0L25vdGlmeS9ieGltZy5waHAiLCJleHBpcmF0aW9uIjoxNDQyMTk0NTE3fQ==',
			'signature' : 'd29e0f51cfead330d3682c0dee10b0ca'
		});
		$('button').on('click', function (e) {
			JUploader.upload({
				complete: function (re) {
					console.log(re);
				}
			});
		});
	</script>
</html>