javascript - 七牛,用js上傳一直報 400 bad request
phpcn_u1582
phpcn_u1582 2017-05-19 10:41:30
0
1
766

用js最簡單的表單上傳,或用官方的例子都是這樣,我用java上傳就沒問題...是不是我的帳號設定有問題?

以下是頁面程式碼

<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <title>七牛</title>
    <style>
        .ipt {
            width: 300px;
        }

        label {
            width: 130px;
            display: block;
        }

        ul li {
            list-style: none;
        }

        .ui-progressbar {
            position: relative;
        }

        .progress-label {
            position: absolute;
            left: 50%;
            top: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }

        #progressbar {
            height: 30px;
            display: none;
        }

        #dialog {
            display: none;
        }
    </style>
    <script src="/resources/js/jquery/jquery_2.1.1.min.js"></script>
</head>
<body>
<ul>
    <li>
        <label for="token">token:</label>
        <input id="token" name="token" class="ipt" value="">
        <a target="blank" href="http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken">在线生成token</a>
    </li>
    <li>
        <label for="key">key:</label>
        <input id="key" name="key" class="ipt" value="">
    </li>
    <li>
        <label for="bucket">照片:</label>
        <input id="file" name="file" class="ipt" type="file"/>
    </li>
    <li>
        <input id="btn_upload" type="button" value="提交">
    </li>
    <p id="progressbar">
        <p class="progress-label"></p>
    </p>
</ul>
<p id="dialog" title="上传成功"></p>
<script>
    /*
     *   本示例演示七牛云存储表单上传
     *
     *   按照以下的步骤运行示例:
     *
     *   1. 填写token。需要您不知道如何生成token,可以点击右侧的链接生成,然后将结果复制粘贴过来。
     *   2. 填写key。如果您在生成token的过程中指定了key,则将其输入至此。否则留空。
     *   3. 姓名是一个自定义的变量,如果生成token的过程中指定了returnUrl和returnBody,
     *      并且returnBody中指定了期望返回此字段,则七牛会将其返回给returnUrl对应的业务服务器。
     *      callbackBody亦然。
     *   4. 选择任意一张照片,然后点击提交即可
     *
     *   实际开发中,您可以通过后端开发语言动态生成这个表单,将token的hidden属性设置为true并对其进行赋值。
     *
     *  **********************************************************************************
     *  * 贡献代码:
     *  * 1. git clone git@github.com:icattlecoder/jsfiddle
     *  * 2. push代码到您的github库
     *  * 3. 测试效果,访问 http://jsfiddle.net/gh/get/jquery/1.9.1/<Your GitHub Name>/jsfiddle/tree/master/ajaxupload
     *  * 4. 提pr
     *   **********************************************************************************
     */
    $(document).ready(function () {
        var Qiniu_UploadUrl = "http://up.qiniu.com";
        /*var progressbar = $("#progressbar"),
                progressLabel = $(".progress-label");
        progressbar.progressbar({
            value: false,
            change: function () {
                progressLabel.text(progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressLabel.text("Complete!");
            }
        });*/
        $("#btn_upload").click(function () {
            //普通上传
            var Qiniu_upload = function (f, token, key) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', Qiniu_UploadUrl, true);
                var formData, startDate;
                formData = new FormData();
                if (key !== null && key !== undefined) {
                    formData.append('key', key);
                }
                formData.append('token', token);
                formData.append('file', f);
                var taking;
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var nowDate = new Date().getTime();
                        taking = nowDate - startDate;
                        var x = (evt.loaded) / 1024;
                        var y = taking / 1000;
                        var uploadSpeed = (x / y);
                        var formatSpeed;
                        if (uploadSpeed > 1024) {
                            formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
                        } else {
                            formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
                        }
                        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                        //progressbar.progressbar("value", percentComplete);
                        // console && console.log(percentComplete, ",", formatSpeed);
                    }
                }, false);

                xhr.onreadystatechange = function (response) {
                    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                        var blkRet = JSON.parse(xhr.responseText);
                        console && console.log(blkRet);
                        $("#dialog").html(xhr.responseText).dialog();
                    } else if (xhr.status != 200 && xhr.responseText) {

                    }
                };
                startDate = new Date().getTime();
                //$("#progressbar").show();
                xhr.send(formData);
            };
            var token = $("#token").val();
            if ($("#file")[0].files.length > 0 && token != "") {
                Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
            } else {
                console && console.log("form input error");
            }
        })
    })
</script>
</body>
</html>
phpcn_u1582
phpcn_u1582

全部回覆(1)
刘奇

七牛服務端和客戶端上傳url是不同的,你用java成功了,應該是創建的華東的儲存空間。
http://up.qiniu.com 上傳來源站HTTP 位址, 適用於伺服器端上傳
http://upload.qiniu.com 上傳HTTP 加速位址, 適用於客戶端上傳
具體的可以看一下這裡https: //developer.qiniu.com/k...

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板