Question Comment puis-je télécharger des fichiers de manière asynchrone?


Je voudrais télécharger un fichier de manière asynchrone avec jQuery. C'est mon HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Et voici mon Jquery code:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

Au lieu de télécharger le fichier, j'obtiens seulement le nom du fichier. Que puis-je faire pour résoudre ce problème?

Solution actuelle

J'utilise le Plugin Formulaire jQuery pour télécharger des fichiers.


2606
2017-10-03 10:22


origine


Réponses:


Avec HTML5 vous pouvez faire des téléchargements de fichiers avec Ajax et jQuery. Non seulement cela, vous pouvez faire des validations de fichier (nom, taille, et type MIME) ou gérer l'événement de progression avec la balise de progression HTML5 (ou une div). Récemment j'ai dû faire un uploader de fichier, mais je ne voulais pas utiliser Flash ni Iframes ou plugins et après quelques recherches j'ai trouvé la solution.

Le HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

D'abord, vous pouvez faire une validation si vous le souhaitez. Par exemple, dans l'événement onChange du fichier:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Maintenant, l'Ajax soumettre avec le clic du bouton:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Comme vous pouvez le voir, avec le HTML5 (et quelques recherches) le téléchargement de fichiers devient non seulement possible mais super facile. Essayez avec Google Chrome car certains des composants HTML5 des exemples ne sont pas disponibles dans tous les navigateurs.


2335
2018-01-06 13:34



Il existe plusieurs plugins prêts à l'emploi pour le téléchargement de fichiers pour jQuery.

Faire ce genre de hacks de téléchargement n'est pas une expérience agréable, donc les gens aiment utiliser des solutions toutes faites.

Voici quelques-uns:

Vous pouvez rechercher plus de projets sur NPM (en utilisant "jquery-plugin" comme mot-clé) ou sur Github.


334
2017-10-15 10:35



Mise à jour 2017: Cela dépend encore des navigateurs votre utilisations démographiques.

Une chose importante à comprendre avec le "nouveau" HTML5 file API est c'est n'a pas été pris en charge jusqu'à IE 10. Si le marché spécifique que vous visez a une prépensité supérieure à la moyenne par rapport aux anciennes versions de Windows, vous n'y aurez peut-être pas accès.

En 2017, environ 5% des navigateurs sont l'IE 6, 7, 8 ou 9. Si vous vous dirigez vers une grande entreprise (par exemple, un outil B2B, ou quelque chose que vous fournissez pour la formation), ce chiffre peut exploser. Il y a quelques mois seulement - en 2016 - j'ai traité avec une entreprise utilisant IE8 sur plus de 60% de leurs machines.

Alors avant de faire quoi que ce soit: vérifier quel navigateur votre les utilisateurs utilisent. Si vous ne le faites pas, vous apprendrez une leçon rapide et douloureuse sur la raison pour laquelle «travaille pour moi» n'est pas assez bon dans un livrable à un client.

Ma réponse de 2008 suit.


Cependant, il existe des méthodes non-JS viables de téléchargement de fichiers. Vous pouvez créer un iframe sur la page (que vous masquez avec CSS), puis cibler votre formulaire pour publier sur cette iframe. La page principale n'a pas besoin de se déplacer.

C'est un "vrai" post donc ce n'est pas totalement interactif. Si vous avez besoin d'un statut, vous avez besoin de quelque chose de côté serveur pour le traiter. Cela varie massivement en fonction de votre serveur. ASP.NET a de meilleurs mécanismes. PHP plaine échoue, mais vous pouvez utiliser Perl ou des modifications d'Apache pour le contourner.

Si vous avez besoin de plusieurs téléchargements de fichiers, il est préférable de faire chaque fichier un à la fois (pour dépasser les limites de téléchargement de fichiers maximum). Postez le premier formulaire dans l'iframe, surveillez sa progression en utilisant ce qui précède et quand il a fini, postez le deuxième formulaire à l'iframe, et ainsi de suite.

Ou utilisez une solution Java / Flash. Ils sont beaucoup plus flexibles dans ce qu'ils peuvent faire avec leurs messages ...


237
2017-10-03 10:41



Je recommande d'utiliser le Fine Uploader plugin à cet effet. Votre JavaScript le code serait:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

105
2017-11-21 16:38



Note: Cette réponse est obsolète, il est maintenant possible de télécharger des fichiers en utilisant XHR.


Vous ne pouvez pas télécharger de fichiers en utilisant XMLHttpRequest (Ajax). Vous pouvez simuler l'effet en utilisant un iframe ou Flash. L'excellent Plugin Formulaire jQuery qui publie vos fichiers via un iframe pour obtenir l'effet.


87
2017-10-03 10:36



Ce Téléchargement du fichier AJAX Plugin jQuery télécharge le fichier somehwere, et passe le réponse à un rappel, rien d'autre.

  • Il ne dépend pas de HTML spécifique, il suffit de lui donner un <input type="file">
  • Il ne nécessite pas de réponse particulière de votre serveur
  • Peu importe le nombre de fichiers que vous utilisez ou l'endroit où ils se trouvent sur la page

- Utilisez aussi peu que -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- ou autant que -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

81
2017-07-29 00:34



Emballage pour les futurs lecteurs.

Téléchargement de fichier asynchrone

Avec HTML5

Vous pouvez télécharger des fichiers avec jQuery en utilisant le $.ajax() méthode si Données de formulaire et le API de fichier sont pris en charge (les deux fonctionnalités HTML5).

Vous pouvez également envoyer des fichiers sans FormData mais de toute façon l'API de fichier doit être présent pour traiter les fichiers de telle sorte qu'ils peuvent être envoyés avec XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Pour un JavaScript rapide et pur (pas de jQuery) exemple voir "Envoi de fichiers à l'aide d'un objet FormData".

Se retirer

Lorsque HTML5 n'est pas pris en charge (non API de fichier) la seule autre solution JavaScript pure (non Flash ou tout autre plugin de navigateur) est le iframe caché technique, qui permet d'émuler une requête asynchrone sans utiliser le XMLHttpRequest objet.

Il consiste à définir un iframe comme cible du formulaire avec les entrées du fichier. Lorsque l'utilisateur soumet une demande est faite et les fichiers sont téléchargés, mais la réponse est affichée à l'intérieur de l'iframe au lieu de re-rendre la page principale. Masquer l'iframe rend l'ensemble du processus transparent pour l'utilisateur et émule une requête asynchrone.

Si cela est fait correctement, il devrait fonctionner virtuellement sur n'importe quel navigateur, mais il a quelques réserves quant à la façon d'obtenir la réponse de l'iframe.

Dans ce cas, vous préférerez peut-être utiliser un plugin wrapper Bifröst qui utilise le technique iframe mais fournit également un jQuery Ajax transport permettant de envoyer les fichiers avec juste le $.ajax() méthode comme ceci:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugins

Bifröst est juste un petit wrapper qui ajoute un support de secours à la méthode ajax de jQuery, mais beaucoup des plugins précités comme Plugin Formulaire jQueryou Téléchargement de fichier jQuery inclure la pile entière de HTML5 à différentes solutions de repli et quelques fonctionnalités utiles pour faciliter le processus. En fonction de vos besoins et de vos besoins, vous pouvez envisager une implémentation simple ou l'un de ces plugins.


75
2017-08-25 14:17



J'ai utilisé le script ci-dessous pour télécharger des images qui se passe bien.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Explication

J'utilise la réponse div pour montrer l'animation de téléchargement et la réponse après le téléchargement.

La meilleure partie est que vous pouvez envoyer des données supplémentaires telles que ids & etc avec le fichier lorsque vous utilisez ce script. Je l'ai mentionné extra-data comme dans le script.

Au niveau PHP, cela fonctionnera comme un téléchargement de fichier normal. les données supplémentaires peuvent être récupérées $_POST Les données.

Ici, vous n'utilisez pas un plugin et d'autres choses. Vous pouvez changer le code comme vous voulez. Vous ne codez pas aveuglément ici. C'est la fonctionnalité principale de tout téléchargement de fichier jQuery. En fait, Javascript.


57
2018-01-25 11:03