我是一個很菜的人,爲了實現無刷新上傳圖片至又拍雲,初學了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>