使用FormData+jQuery+AJAX傳送檔案至又拍雲，實現無重新整理上傳

weixin_33806914發表於2015-12-28
ORMjQuery

我是一個很菜的人，為了實現無重新整理上傳圖片至又拍雲，初學了jQuery，如果程式碼有不好的地方請指出

功能：通過HTML5新功能FormData無重新整理上傳檔案至又拍雲(七牛雲類似)
附上程式碼,如果不懂得地方就提出來吧

<?php
//下面程式碼用於生成signature 和 policy 用於後面的表單上傳
$secret='你的表單API secret';     //表單API  去又拍雲官網獲得
$mybucket='你的空間名';                     //空間名
$mytime=time()+600;
$mykey='/{year}/{mon}/{day}/upload_{filemd5}{.suffix}';   //詳情看官方文件
$option=array('bucket'=>$mybucket,'expiration'=>$mytime,'save-key'=>$mykey);
$option =  json_encode($option,JSON_UNESCAPED_SLASHES);
$policy = base64_encode($option);
$option = $policy.'&'.$secret;
$signature = md5($option);
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>又拍雲AJAX上傳</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<form id="formUpload">
    <input type="hidden" name="policy" value="<?php echo $policy;?>">
    <input type="hidden" name="signature" value="<?php echo $signature;?>">
    <input type="file" name="file">
</form>
<button id="but" onclick="formUpload();">AJAX上傳</button>
<div id="content"></div>  <!-- 用於顯示圖片 -->
<script>
    function formUpload(){
        var formData = new FormData($("#formUpload")[0]); //Jquery得到是是一個陣列 詳情看http://segmentfault.com/q/1010000004213457
        $.ajax({
            url : 'http://v0.api.upyun.com/xxxxxx',   //檔案傳送地址 例如 http://v0.api.upyun.com/xxxxxx
            type : 'POST',
            data : formData,

            /**
             * 必須false才會避開jQuery對 formdata 的預設處理
             * XMLHttpRequest會對 formdata 進行正確的處理
             */
            processData : false,
            /**
             *必須false才會自動加上正確的Content-Type
             */
            contentType : false,
            success : function(responseStr) {
                var obj = $.parseJSON(responseStr);
                var pic = obj.url;
                var myurl = "http://xxxxxx.b0.upaiyun.com";  //自己訪問域名字首 例如 http://xxxxxx.b0.upaiyun.com
                var picurl = "<img src=\""+myurl+pic+"\">";      //這裡其實只是用來顯示一個 img標籤
                $("#content").html(picurl);                      //輸出圖片

            },
            error : function(responseStr) {
                alert("失敗:" + JSON.stringify(responseStr));//將    json物件    轉成    json字串。
            }
        });
    }
</script>
</body>
</html>

相關文章