使用FormData+jQuery+AJAX发送文件至又拍云，实现无刷新上传

2024年4月29日 153次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞