简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Qiniu, le téléchargement avec js signale toujours 400 requêtes incorrectes
phpcn_u1582
phpcn_u1582 2017-05-19 10:41:30
0
1
692

Utilisez le formulaire js le plus simple pour télécharger, ou utilisez l'exemple officiel. C'est le cas si j'utilise Java pour télécharger, il n'y a pas de problème... Y a-t-il un problème avec les paramètres de mon compte ?

Ce qui suit. est le code de la page

<!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

répondre à tous(1)
刘奇
刘奇2017-05-19 10:43:30 1 plancher

Les URL de téléchargement du serveur Qiniu et du client sont différentes Si vous utilisez Java avec succès, il devrait s'agir de l'espace de stockage de la Chine orientale créé.
http://up.qiniu.com Adresse HTTP source de téléchargement, adaptée au téléchargement côté serveur
http://upload.qiniu.com Adresse d'accélération HTTP de téléchargement, adaptée au téléchargement côté client
Pour plus de détails, veuillez consulter https : //developer.qiniu.com/k...

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！