Javascript : Télécharger un fichier... sans fichier

Question

J'essaie de simuler un téléchargement de fichier sans utiliser réellement une entrée de fichier de l'utilisateur. Le contenu du fichier sera généré dynamiquement à partir d'une chaîne de caractères.

Est-ce possible ? Quelqu'un l'a-t-il déjà fait ? Existe-t-il des exemples/une théorie ?

Pour clarifier, je sais comment télécharger un fichier à l'aide des techniques AJAX en utilisant une iframe cachée et ses amis - le problème est de télécharger un fichier qui n'est pas dans le formulaire.

J'utilise ExtJS, mais jQuery est également utilisable puisque ExtJS peut s'y brancher (ext-jquery-base).

Answer 1

Si vous n'avez pas besoin de la prise en charge des navigateurs plus anciens, vous pouvez utiliser la fonction FormData Objet, qui fait partie de l'API Fichier :

const formData = new FormData();
const blob = new Blob(['Lorem ipsum'], { type: 'plain/text' });
formData.append('file', blob, 'readme.txt');

const request = new XMLHttpRequest();
request.open('POST', 'http://example.org/upload');
request.send(formData);

L'API fichier est prise en charge par tous les navigateurs actuels (IE10+).

• https://developer.mozilla.org/en-US/docs/Web/API/FormData
• http://caniuse.com/#feat=fileapi

Answer 2

Pourquoi ne pas simplement utiliser XMLHttpRequest() avec POST ?

function beginQuoteFileUnquoteUpload(data)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function ()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
            alert("File uploaded!");
    }
    xhr.send("filedata="+encodeURIComponent(data));
}

Le gestionnaire script du serveur écrit simplement les données du fichier dans un fichier.

EDIT
Le téléchargement de fichiers est toujours un post http avec un type de contenu différent. Vous pouvez utiliser ce type de contenu et séparer votre contenu avec des frontières :

function beginQuoteFileUnquoteUpload(data)
{
    // Define a boundary, I stole this from IE but you can use any string AFAIK
    var boundary = "---------------------------7da24f2e50046";
    var xhr = new XMLHttpRequest();
    var body = '--' + boundary + '\r\n'
             // Parameter name is "file" and local filename is "temp.txt"
             + 'Content-Disposition: form-data; name="file";'
             + 'filename="temp.txt"\r\n'
             // Add the file's mime-type
             + 'Content-type: plain/text\r\n\r\n'
             + data + '\r\n'
             + boundary + '--';

    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
    xhr.setRequestHeader(
        "Content-type", "multipart/form-data; boundary="+boundary

    );
    xhr.onreadystatechange = function ()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
            alert("File uploaded!");
    }
    xhr.send(body);
}

Si vous souhaitez envoyer des données supplémentaires, il vous suffit de séparer chaque section par une frontière et de décrire les en-têtes content-disposition et content-type pour chaque section. Chaque en-tête est séparé par une nouvelle ligne et le corps est séparé des en-têtes par une nouvelle ligne supplémentaire. Naturellement, le téléchargement de données binaires de cette manière serait légèrement plus difficile :-)

Modification supplémentaire : j'ai oublié de mentionner que la chaîne de délimitation ne doit pas se trouver dans le "fichier" texte que vous envoyez, sinon elle sera traitée comme une délimitation.

Answer 3

Je partage simplement le résultat final, qui fonctionne - et permet d'ajouter/supprimer des paramètres sans coder en dur.

var boundary = '-----------------------------' +
            Math.floor(Math.random() * Math.pow(10, 8));

    /* Parameters go here */
var params = {
    file: {
        type: 'text/plain',
        filename: Path.utils.basename(currentTab.id),
        content: GET_CONTENT() /* File content goes here */
    },
    action: 'upload',
    overwrite: 'true',
    destination: '/'
};

var content = [];
for(var i in params) {
    content.push('--' + boundary);

    var mimeHeader = 'Content-Disposition: form-data; name="'+i+'"; ';
    if(params[i].filename)
        mimeHeader += 'filename="'+ params[i].filename +'";';
    content.push(mimeHeader);

    if(params[i].type)
        content.push('Content-Type: ' + params[i].type);

    content.push('');
    content.push(params[i].content || params[i]);
};

    /* Use your favorite toolkit here */
    /* it should still work if you can control headers and POST raw data */
Ext.Ajax.request({
    method: 'POST',
    url: 'www.example.com/upload.php',
    jsonData: content.join('\r\n'),
    headers: {
        'Content-Type': 'multipart/form-data; boundary=' + boundary,
        'Content-Length': content.length
    }
});

Il a été testé pour fonctionner sur tous les navigateurs modernes, y compris mais sans s'y limiter :

• IE6+.
• FF 1.5+
• Opera 9+.
• Chrome 1.0 et plus
• Safari 3.0 et plus

Answer 4

Un téléchargement de fichier, c'est juste un POST avec le contenu de ce fichier correctement encodé et avec un code spécial. multipart/formdata en-tête. Vous devez utiliser cette <input type=file /> car la sécurité de votre navigateur vous interdit d'accéder directement au disque de l'utilisateur.

Comme vous n'avez pas besoin de lire le disque utilisateur, OUI vous pouvez le simuler en utilisant Javascript. Ce sera juste un XMLHttpRequest . Pour falsifier une demande de téléchargement "authentique", vous pouvez installer Fiddler et inspecter votre demande de sortie.

Vous devrez encoder ce fichier correctement, ce lien peut donc vous être très utile : RFC 2388 : Retourner les valeurs des formulaires : multipart/form-data

Answer 5

Je viens d'attraper cette chaîne POST_DATA avec l'addon Firefox TamperData. J'ai soumis un formulaire avec une type="file" nommé "myfile" et un bouton d'envoi nommé "btn-submit" avec la valeur "Upload". Le contenu du fichier téléchargé est le suivant

Line One
Line Two
Line Three

Voici donc la chaîne POST_DATA :

-----------------------------192642264827446\r\n
Content-Disposition: form-data;    \n
name="myfile"; filename="local-file-name.txt"\r\n
Content-Type: text/plain\r\n
\r\n
Line \n
One\r\n
Line Two\r\n
Line Three\r\n
\r\n
-----------------------------192642264827446\n
\r\n
Content-Disposition: form-data; name="btn-submit"\r\n
\r\n
Upload\n
\r\n
-----------------------------192642264827446--\r\n

Je ne suis pas sûr de la signification du numéro (192642264827446), mais cela ne devrait pas être trop difficile à trouver.