Exemple de téléchargement de fichiers à l'aide de jQuery HTML5 et FormData

Avant HTML5, il existait une série de technologies et de plug-ins jQuery pour implémenter le téléchargement de fichiers AJAX. HTML5 introduit la classe FormData qui simplifie le téléchargement de fichiers. Cet article vous présentera un exemple de téléchargement de fichiers à l'aide de jQuery HTML5 et FormData.

$('#myform').on('sumbit', function(){
    var form = $(this);
    var formdata = false;
    if (window.FormData)
    {
        formdata = new FormData(form[0]);
    }
    var formAction = form.attr('action');
    $.ajax({
        url         : '/upload',
        data        : formdata ? formdata : form.serialize(),
        cache       : false,
        contentType : false,
        processData : false,
        type        : 'POST',
        success     : function(data, textStatus, jqXHR){
            // Callback code
        }
    });
    });

Vous n'avez besoin d'aucun plug-in, de compétences Flash ou Iframe pour y parvenir efficacement. Voici quelques astuces pour que ce code fonctionne comme prévu :

Lorsque nous créons une instance de FormData, nous transmettons form[0] au lieu de form. Cela signifie des éléments de formulaire réels, mais pas des sélecteurs jQuery.

Nous passons simplement false au lieu de définir contentType. Cela signifie que jQuery n'ajoute pas l'en-tête Content-Type à la requête.

Nous définissons processData sur false, donc jQuery ne convertira pas notre valeur de données (basée sur FormData) en chaîne.

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!