又拍云使用ajax 上传

在又拍云官网,没有提供js的demo,只有node.js,和其他的,而现在又有通过 js来上传文件到又拍云的服务器,不能通过自己的服务器进行中转操作,这样会耗费自己的服务器的带宽.
上代码吧,这个代码是我找了好久,参考了一些其他的人的博客,最终整合出来的.
具体看里面的注释吧..
<!DOCTYPE>  
<html>  
<head>  
<title> 又拍云使用ajax上传操作</title>  
</head>  
  
<body>  
<form class="form-horizontal" role="form" id="myForm"  
                    action="http://v0.api.upyun.com/<空间名称>" method="post"  
                    enctype="multipart/form-data">  
                  
                    <input type="hidden" name="policy"  
                        value="eyJidWNrZXQiOiJ1aW4tbW9kaWxlZmlsZS10ZXN0IiwiZXhwaXJhdGljjkvbiI6MTUyMDU5OTgxNywic2F2ZS1rZXkiOiJjYXJkL3NhbGVzLzlfMTgwMzA5N25IYmhYZDgucG5nIn0=">  


                 
  
				<input type="hidden" name="authorization"  
                        value="UPYUN uadmin:JKRVpIvgFrn3j4keAna8AKBgt4I=">  


                    <div class="form-group">  
                        <label class="col-sm-2 control-label">说明:</label>  
                        <div class="col-sm-10">  
                            <p class="form-control-static ">ajax 文件上传 。</p>  
                        </div>  
                    </div>  
                    <div class="form-group">  
                        <label for="url" class="col-sm-2 control-label"><s>*</s>图片选择:</label>  
                        <div class="col-sm-7">  
                            <input type="file" name="file" id="file_upload" value=""  
                                class="form-control" placeholder="图片地址">  
                        </div>  
                    </div>  
  
                    <div class="form-group">  
                        <div class="col-sm-offset-2 col-sm-7">  
                          
                            <a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"  
                                onclick="uploadByForm();">Ajax上传</a>  
                        </div>  
                    </div>  
                </form>  
  
   <div id="msg">  
                      
  </div>  
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
<script type="text/javascript">  
  
/**  
         * ajax 上传。  
         */  
        function uploadByForm() {  
                var formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。  {上面表单和下面都是对应,随便用一个,保持参数对应就好了}
              
			  // policy 和authorization 里面的签名 需要后台计算好给前端,不能前端自行计算.具体可看又拍云文档
            //var formData = new FormData();//构造空对象，下面用append 方法赋值。  可用上面表单的方式直接上传
          //formData.append("policy","eyJidWNrZXQiOiJ1aW4tbW9kaWxlZmlsZS10ZXN0IiwiZXhwaXguiguigGlvbiI6MTUyMDU5NjIzMSwic2F2ZS1rZXkiOiJjYXJkL3NhbGVzLzlfMTgwMzA5VnlWcUNVSmEucG5nIn0="); 
		 // formData.append("authorization","UPYUN admin:+SpVIK1R52fG7/+bJa6gK63o844=");  // 这里这个对应签名 key 不用修改 val 要改成 UPYUN <管理员账号>:<签名>
          //formData.append("signature","pI/e+qQkkd4baVoS5Bva1W6hsy4=");  
         // formData.append("file",$("#file_upload")[0].files[0]);   //获取对应的图片文件
		 // 域名不变,域名后面接上对应的又拍云空间名称
            var url = "http://v0.api.upyun.com/<空间名称>";  
            $.ajax({  
                url : url,type : 'POST',data : formData,/**   
                 * 必须false才会避开jQuery对 formdata 的默认处理   
                 * XMLHttpRequest会对 formdata 进行正确的处理   
                 */  
                processData : false,/**   
                 *必须false才会自动加上正确的Content-Type   
                 */  
                contentType : false,success : function(responseStr) {  
                                    alert("成功：" + JSON.stringify(responseStr));  
                    //                  var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");  
                },error : function(responseStr) {  
                   // alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。  
					$("#msg").html(JSON.stringify(responseStr));
                }  
            });  
        }  
</script>  
</body>  
</html>
又拍云使用ajax 上传

相关推荐
