Comment résoudre l'erreur « Aucune limite multipartie » dans le téléchargement de fichiers Ajax XMLHttpRequest ?

Télécharger des fichiers avec Ajax XMLHttpRequest : résolution de l'erreur « Aucune limite multipart »

Lorsque vous essayez de télécharger des fichiers à l'aide de XMLHttpRequest, vous pouvez rencontrer le problème Erreur « La demande a été rejetée car aucune limite en plusieurs parties n'a été trouvée ». Pour résoudre ce problème, examinons le code fourni et identifions les causes potentielles.

L'extrait de code suivant est destiné à télécharger un fichier à l'aide de XMLHttpRequest :

<code class="javascript">var url = "http://localhost:80/...";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        // xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);
    }, false);
});</code>

Pour résoudre l'erreur susmentionnée , deux points clés doivent être abordés :

1. La ligne xhr.file = file; est redondant et inutile. Il n'est pas nécessaire de joindre l'objet fichier de cette manière.
2. Le véritable problème réside dans la ligne xhr.send(file). Pour télécharger correctement le fichier, il doit être enveloppé dans un objet FormData, qui le formatera en un objet de données POST multipart/form-data. Le code mis à jour devrait ressembler à ceci :

<code class="javascript">...
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
...</code>

En créant un objet FormData et en ajoutant le fichier, vous vous assurez que les données sont correctement structurées et prêtes à être traitées sur le serveur. Le fichier sera désormais accessible dans $_FILES['thefile'] (si vous utilisez PHP côté serveur), vous permettant de le gérer de manière appropriée.

En vous référant aux ressources de documentation telles que les démos MDC et Mozilla peut fournir des conseils précieux face à de tels problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!