在又拍云官网,没有提供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>