web-dev-qa-db-fra.com

Télécharger un fichier avec Ajax XmlHttpRequest

Bonjour, j'essaie d'envoyer un fichier avec xmlhttprequest avec ce code.

<script>
    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);
    });
</script>

mais j'ai eu cette erreur: la demande a été rejetée parce qu'aucune limite multipart n'a été trouvée, aidez-moi svp ..

javascriptajaxjqueryfile-uploadxmlhttprequest
54
Sedat Başar
  1. xhr.file = file; N'existe pas. l'objet fichier n'est pas censé être attaché de cette façon.

  2. xhr.send(file) n'envoie pas le fichier. Vous devez utiliser l'objet FormData pour envelopper le fichier dans un objet de données post multipart/form-data:

    var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);

Ensuite, vous pourrez accéder au fichier dans $_FILES['thefile'] (Si vous utilisez PHP).

Rappelez-vous, MDC et démos de Mozilla Hack sont vos meilleurs amis.

[~ # ~] éditer [~ # ~] : le (2) ci-dessus était incorrect. Il envoie le fichier, mais il l’enverrait en tant que données brutes de publication. Cela signifie que vous devrez l'analyser vous-même sur le serveur (et ce n'est souvent pas possible, dépend de la configuration du serveur). Lisez comment obtenir des données de publication brutes dans PHP ici .

92
timdream