human
Je voudrais savoir s'il existe une manière simple de télécharger des fichiers via AJAX + JSON. Si oui, comment faire
gpt
Vous pouvez télécharger des fichiers en utilisant la méthode ```POST```, mais vous devez inclure le FormData avec la propriété ```enctype``` définie comme ```multipart/form-data``` pour que vos fichiers soient envoyés dans la requête. Cependant, le format d'envoi ne sera pas du JSON, mais plutôt l'```enctype``` que vous définissez dans votre ```FormData```, qui sera interprété différemment selon le langage que vous utilisez côté serveur.

* application/x-www-form-urlencoded: c'est l'enctype par défaut, tous les espaces sont convertis en "+" et les caractères non standard sont convertis en représentation ANSII HEX;
* multipart/form-data: aucun caractère n'est converti, les valeurs du formulaire sont conservées intactes, nécessaire pour le téléchargement de fichiers;
* text/plain: seuls les espaces sont convertis en "+";

Ainsi, ce qui est envoyé n'est pas du JSON lorsque nous communiquons en envoyant des données au serveur. Ces données sont sérialisées pour être livrées dans la zone de données de la méthode que vous utilisez pour communiquer via HTTP(S) dans les formats présentés.
Pendant le téléchargement, vous pouvez capturer (dans les navigateurs modernes) l'événement de progression du téléchargement, comme dans l'exemple ci-dessous.
Exemple utilisant **jQuery**:

**Formulaire**
```&lt;form id=&quot;formulario&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;text&quot; name=&quot;campo1&quot; value=&quot;hello&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;campo2&quot; value=&quot;world&quot; /&gt;
    &lt;input name=&quot;arquivo&quot; type=&quot;file&quot; /&gt;
    &lt;button&gt;Enviar&lt;/button&gt;
&lt;/form&gt;
```

**Javascript**
```$("#formulario").submit(function() {
    var formData = new FormData(this);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function(data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() { // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property is supported
                myXhr.upload.addEventListener('progress', function() {
                    /* do something during the upload progress */
                }, false);
            }
            return myXhr;
        }
    });
});
``