使用FormData+jQuery+AJAX發送文件至又拍雲,實現無刷新上傳

我是一個很菜的人,爲了實現無刷新上傳圖片至又拍雲,初學了jQuery,若是代碼有很差的地方請指出php

功能:經過HTML5新功能FormData無刷新上傳文件至又拍雲(七牛雲相似)
附上代碼,若是不懂得地方就提出來吧html

<?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>
相關文章
相關標籤/搜索