运用FormData+jQuery+AJAX发送文件至又拍云，完成无革新上传

2024年4月2日 169次阅读 来源: smith

我是一个很菜的人，为了完成无革新上传图片至又拍云，初学了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>
    原文作者：smith
    原文地址: https://segmentfault.com/a/1190000004213912
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞