Maison > interface Web > js tutoriel > Comment résoudre l'erreur « Aucune limite multipartie » dans le téléchargement de fichiers Ajax XMLHttpRequest ?

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

Mary-Kate Olsen
Libérer: 2024-10-18 16:40:29
original
315 Les gens l'ont consulté

How to Resolve the

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal