前端js使用又拍云绕过服务器直接上传图片到云端

一般我们平时做图片视频上传的时候一直是上传到本地服务端下，如果我们想把文件传到云端类似又拍云或者七牛云这样的云端存储下，虽然可以先将文件传给服务器，再由服务器传给云端，但是如果需要上传的文件比较多的话，就不必占用服务器带宽，可以直接在前端绕过服务器上传到云端。七牛云官方api比较完善一点，但是又拍云官方没有提供js上传到云端的api，而且文档写的不够清楚。话不多说，上代码。

<input id='fileA' type='file' accept='image/gif, image/jpeg,image/png' multiple='multiple'  onchange='upLoadG()'>

<script>
<script src="lib/md5.js"></script>
<!--这个前端js的MD5加密工具又拍云官方提供了，可以去又拍云官方下载-->
var options = {
	'bucket': '需要上传的空间名',
	'save-key': '/{year}/{mon}/{day}/{filemd5}{.suffix}',
	'expiration': Math.floor(new Date().getTime() / 1000) + 86400
};
// 查看更多参数：http://docs.upyun.com/api/form_api/#表单API接口简介
var policy = window.btoa(JSON.stringify(options));
// 从 UPYUN 用户管理后台获取表单 API
var form_api_secret = '去自己的又拍云控制台找表单api密钥';
// 计算签名
var signature = md5(policy + '&' + form_api_secret);
function upLoadG(e){	
		   		var fileInput = document.getElementById(fileA); 
			   	var file = fileInput.files[0]; 
				formData.append("policy", policy);  
		        formData.append("signature", signature);  
	            formData.append("file",file); 			   		
					   			var url = 'http://v0.api.upyun.com/' + options.bucket;
						 		$.ajax({  
								    url : url,  
								    type : 'POST',  
								    data : formData,  
								    processData : false,  
								    contentType : false,  
								    success : function(responseStr) {  
								                   //     alert("成功：" + JSON.stringify(responseStr)); 
								                  // console.log(responseStr);
								                       var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")"); 
								    },  
								    error : function(responseStr) {  
								       // alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。  
								    }  
								});
		</script>						
	

安全着想，js上传所必要的policy和signature参数需要放到后端生成出来返给前端，不然随便一个人看到你的前端代码就能把参数拿来上传文件到你的又拍云。另外我自己测试的时候发现这样上传又拍云只接收name为file的文件，其他名字的不接收，暂时不清楚怎么回事。

http://jerryzou.com/posts/bulkUploadToUPYUN/推荐这个博客，可能需要google才能访问到他的GitHub，使用的一个plupload组件批量上传到又拍云。