recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Concernant le problème du téléchargement de plusieurs images par Ajax.

Je ne sais pas comment Ajax télécharge plusieurs images et les envoie en arrière-plan.

Pour une seule image, vous pouvez utiliser la base64 pour l'envoyer au backend, mais si vous avez plusieurs images, cette méthode ne convient pas car la base64 sera très volumineuse.

Comment est-il envoyé au backend ? Si l’arrière-plan est PHP, comment le reçoit-il ?

Selon la méthode des commentaires, j'ai évidemment choisi 2 photos à télécharger. Pourquoi un seul fichier est affiché en arrière-plan ? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>


<form id="form">
    <input type="file" multiple="" name="file">
    <button id="btn" type="button">上传</button>
</form>


<script>
document.getElementById('btn').onclick = () => {
    $.ajax({
        url: './test.php',
        type: 'POST',
        dataType: 'text',
        data: new FormData(document.getElementById('form')),
        processData: false,
        contentType: false,
    })
    .done(function(data) {
        console.log(data);
    })
}
</script>


    
</body>
</html>

我想大声告诉你我想大声告诉你2803 Il y a quelques jours750

répondre à tous(5)je répondrai

  • 三叔

    三叔2017-06-26 10:57:20

    Il est préférable d'utiliser un formulaire. La raison pour laquelle vous choisissez l'ajax direct est probablement parce que vous ne souhaitez pas actualiser la page.
    Dans ce cas, vous pouvez utiliser formdata pour la soumission ajax. Vous pouvez voir l'exemple pour plus de détails. Sa fonction principale est de Le contenu du champ de formulaire est encapsulé dans les données du formulaire puis soumis en utilisant ajax. Le nom du contrôle de formulaire correspond au nom du paramètre d'arrière-plan. Comme pour plusieurs images, utilisez simplement un ensemble. d'entrées portant le même nom. Vous trouverez ci-dessous les js et les rendus. Si vous ne comprenez toujours pas, vous pouvez demander.

    répondre
    0
  • phpcn_u1582

    phpcn_u15822017-06-26 10:57:20

    http://www.jianshu.com/p/756e...
    Plusieurs images sont simplement ajoutées à FormData

    répondre
    0
  • 伊谢尔伦

    伊谢尔伦2017-06-26 10:57:20

    Utilisez simplement FormData pour soumettre

    funUploadFile: function(form, files) {
                    var that = this;
                    var formData = new FormData(form[0]);
                    for (var i = 0; i < files.length; i++) {
                        formData.append('file[' + i + ']', files[i]);
                    }
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                var data = JSON.parse(xhr.responseText);
                                //提交返回
                            }
                        }
                    //侦查当前附件上传情况  
                    xhr.upload.onprogress = function(evt) {
                        var loaded = evt.loaded;
                        var tot = evt.total;
                        var per = Math.floor(100 * loaded / tot); //已经上传的百分比  
                        // console.log(per);
                    }
                    xhr.open("post", 上传地址);
                    xhr.send(formData);
                }

    répondre
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-26 10:57:20

    function httpUpload(url, formData) {
    //formData.append("_token", window._token);
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (response) {
                resolve(response);
            },
            error: function (response) {
                reject(response);
            }
        });
    });
}

    https://developer.mozilla.org...
    L'essentiel est d'ajouter le fichier à télécharger à formData
    Comment l'obtenir sur le backend (php : à l'intérieur de $_FILES)

    répondre
    0
  • 怪我咯

    怪我咯2017-06-26 10:57:20

    Il semble que l'intention initiale de la personne qui a posé la question était que partager tout cela serait trop gros ? Vous pouvez les transmettre un par un et réessayer si vous échouez, le coût de mise en œuvre est donc faible.

    répondre
    0
  • Annulerrépondre