HTML5 Fichier API téléchargement du fichier à partir du serveur et de l'enregistrer dans la sandbox

Je vais vous montrer comment télécharger des fichiers avec le XMLHttpRequest Niveau 2 et les enregistrer avec la Système de fichiers de l'API ou avec la FileSaver interface.

Téléchargement De Fichiers

Pour télécharger un fichier, vous utilisez le XMLHttpRequest Niveau 2 (aka XHR2), qui soutient la croix-origine des demandes, en téléchargeant des événements de progression, et un téléchargement de données binaires. Dans le post "Nouvelles Astuces dans XMLHttpRequest2" il y a beaucoup d'exemples d'utilisation de XHR2.

À télécharger un fichier sous forme d'un blob tout ce que vous avez à faire est de spécifier la responseType de "blob". Vous pouvez également utiliser le type "texte", "arraybuffer" ou "document". La fonction ci-dessous télécharge le fichier dans le url et l'envoie à la success rappel:

function downloadFile(url, success) {
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4) {
            if (success) success(xhr.response);
        }
    };
    xhr.send(null);
}

La success rappel de recevoir comme argument une instance de Blob qui peut ensuite être modifié et enregistré et/ou téléchargées sur un serveur.

L'enregistrement des Fichiers avec le système de fichiers de l'API

Comme le puis-je utiliser... site souligne il n'y a pas beaucoup de navigateurs avec support pour le système de fichiers de l'API. Pour Firefox il y a une explication pour le manque de soutien de. Donc, vous devez utiliser google Chrome pour ce faire.

D'abord, vous devrez demander un espace de stockage, il peut être soit temporaire ou permanent. Vous aurez probablement envie d'avoir un stockage persistant, dans ce cas, vous devrez demander un quota d'espace de stockage à l'avance (quelques faits):

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.storageInfo = window.storageInfo || window.webkitStorageInfo;

//Request access to the file system
var fileSystem = null         //DOMFileSystem instance
  , fsType = PERSISTENT       //PERSISTENT vs. TEMPORARY storage 
  , fsSize = 10 * 1024 * 1024 //size (bytes) of needed space 
  ;

window.storageInfo.requestQuota(fsType, fsSize, function(gb) {
    window.requestFileSystem(fsType, gb, function(fs) {
        fileSystem = fs;
    }, errorHandler);
}, errorHandler);

Maintenant que vous avez accès au système de fichiers vous pouvez enregistrer et lire des fichiers à partir d'elle. La fonction ci-dessous peut enregistrer une goutte dans le chemin d'accès spécifié dans le système de fichiers:

function saveFile(data, path) {
    if (!fileSystem) return;

    fileSystem.root.getFile(path, {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.write(data);
        }, errorHandler);
    }, errorHandler);
}

Un pour lire un fichier par son chemin d'accès:

function readFile(path, success) {
    fileSystem.root.getFile(path, {}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
                if (success) success(this.result);
            };

            reader.readAsText(file);
        }, errorHandler);
    }, errorHandler);
}

En plus de la readAsText méthode, selon le FileReader API vous pouvez appeler readAsArrayBuffer et readAsDataURL.

À l'aide de la FileSaver

Le post "Enregistrement des Fichiers Générés sur le Côté Client" explique très bien l'utilisation de cette API. Certains navigateurs peuvent avoir besoin de l' FileSaver.js afin d'avoir la saveAs interface.

Si vous l'utiliser conjointement avec le downloadFile fonction, vous pourriez avoir quelque chose comme ceci:

downloadFile('image.png', function(blob) {
    saveAs(blob, "image.png");
});

Bien sûr, il aurait plus de sens si l'utilisateur peut visualiser l'image, de la manipuler et de l'enregistrer ensuite dans sa voiture.

Gestionnaire D'Erreur

Simplement de remplir le exemple:

function errorHandler(e) {
    var msg = '';

    switch (e.code) {
        case FileError.QUOTA_EXCEEDED_ERR:
            msg = 'QUOTA_EXCEEDED_ERR';
            break;
        case FileError.NOT_FOUND_ERR:
            msg = 'NOT_FOUND_ERR';
            break;
        case FileError.SECURITY_ERR:
            msg = 'SECURITY_ERR';
            break;
        case FileError.INVALID_MODIFICATION_ERR:
            msg = 'INVALID_MODIFICATION_ERR';
            break;
        case FileError.INVALID_STATE_ERR:
            msg = 'INVALID_STATE_ERR';
            break;
        default:
            msg = 'Unknown Error';
            break;
    };

    console.log('Error: ' + msg);
}

Liens utiles

• Enregistrement des Fichiers Générés sur le Côté Client
• Explorer le système de fichiers Api
• Nouvelles Astuces dans XMLHttpRequest2
• La lecture de Fichiers en JavaScript à l'Aide de l'Api de Fichier

Mon truc, c'est de tout simplement ajouter des Images avec un attribut "src" pointant vers vos téléchargements multiples. Le site du serveur doit envoyer les fichiers avec une "disposition: attachment" en-tête et ensuite le client va essayer d'enregistrer le fichier localement. Le seul "problème" est que les IFRAMEs restera dans votre arborescence DOM débris jusqu'à ce que l'utilisateur quitte ou recharge la page. Faire de l'IFRAME invisible (par exemple, largeur=0; hauteur=0;) et vous êtes prêt à aller! Tous les navigateurs.