javascript - Concernant le problème du téléchargement de plusieurs images par Ajax.
我想大声告诉你
我想大声告诉你 2017-06-26 10:55:20
0
5
719

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>

我想大声告诉你
我想大声告诉你

répondre à tous(5)
三叔

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.

phpcn_u1582

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

伊谢尔伦

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);
                }
曾经蜡笔没有小新
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)

刘奇

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal