Comment télécharger de manière asynchrone des fichiers à l'aide de HTML5 et AJAX

Points de base

• Le téléchargement de fichiers de manière asynchrone à l'aide de HTML5 et AJAX peut être effectué en arrière-plan, permettant aux utilisateurs d'effectuer d'autres tâches sur la page pendant le téléchargement. Ce processus implique la création de formulaires HTML pour télécharger des fichiers sur des pages PHP, et JavaScript garantit que seules des images JPG avec moins de 300 000 octets sont téléchargées.
• La fonction de téléchargement JavaScript nécessite un objet XMLHTTPRequest2 (disponible dans Firefox et Chrome). La méthode .Open () de XMLHTTPRequest est définie pour publier les données sur la page PHP, définir l'en-tête HTTP sur le nom du fichier et transmettre l'objet de fichier à la méthode .Send ().
• Le fichier PHP vérifie l'en-tête http x_filename pour distinguer les demandes AJAX et la publication de formulaire standard. Si le nom de fichier est défini, PHP récupérera les données publiées et la publiera dans un nouveau fichier dans le dossier "Uploads". Le post HTML Multipart / Form Data standard est géré à l'aide de la fonction PHP $ _FILE habituelle.

Dans les articles précédents, nous avons appris à utiliser HTML5 pour faire glisser et déposer des fichiers et à ouvrir des fichiers à l'aide de HTML5 et JavaScript. Nous avons maintenant un ensemble valide de fichiers qui peuvent télécharger chaque fichier sur le serveur. Ce processus a lieu de manière asynchrone en arrière-plan, afin que les utilisateurs puissent effectuer d'autres tâches sur la page au fur et à mesure que le processus progresse.

html

Vérifions à nouveau notre formulaire HTML:

<fieldset><legend>HTML文件上传</legend><div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div></div><div>上传文件</div></fieldset>

Nous téléchargeons le fichier sur la page PHP upload.php. Lorsque l'utilisateur clique sur "Télécharger le fichier", la page traitera les demandes de téléchargement AJAX et la publication de formulaire standard. Notre JavaScript garantira que seules les images JPG sont téléchargées avec moins de 300 000 octets (la valeur spécifiée dans max_file_size).

javascript

Tout d'abord, nous devons ajouter une ligne à la fonction FileSelecthandler () appelée lors de la sélection ou de la glisse et de supprimer un ou plusieurs fichiers. Dans notre boucle de fichier, nous appellerons une autre fonction - uploadFile ():

// 文件选择
function FileSelectHandler(e) {

    // 取消事件和悬停样式
    FileDragHover(e);

    // 获取FileList对象
    var files = e.target.files || e.dataTransfer.files;

    // 处理所有File对象
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
        UploadFile(f);
    }

}

Le téléchargement de fichiers nécessite un objet XMLHTTPRequest2, qui est actuellement disponible dans Firefox et Chrome. Avant de passer l'appel AJAX, nous nous assurons que la méthode .Upload () est disponible et que nous avons un JPG avec une taille de fichier plus petite que la valeur du formulaire max_file_size:

// 上传JPEG文件
function UploadFile(file) {

    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.type == "image/jpeg" && file.size < $id("MAX_FILE_SIZE").value) {

        // 开始上传
        xhr.open("POST", $id("upload").action, true);
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.send(file);

    }

}

La méthode .open () de XMLHttpRequest est définie pour publier les données sur télécharger.php (la propriété d'action de notre formulaire de téléchargement). De plus, nous définissons l'en-tête HTTP sur le nom du fichier et passons l'objet de fichier à la méthode .Send ().

php

Notre fichier php upload.php vérifie désormais l'en-tête http x_filename pour distinguer les demandes AJAX et la publication de formulaire standard:

<?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); ?>

Si le nom de fichier est défini, PHP peut récupérer les données publiées et les sortir dans un nouveau fichier dans le dossier "uploads". Étonnamment, cela peut être réalisé avec une seule ligne de code:

if ($fn) {

    // AJAX调用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上传成功";
    exit();

}

Le message standard HTML Multipart / Form Data peut être géré à l'aide de la fonction PHP $ _FILE habituelle:

<fieldset><legend>HTML文件上传</legend><div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div></div><div>上传文件</div></fieldset>

Vous pouvez afficher la page de démonstration, mais notez qu'elle est hébergée sur des serveurs sans support PHP et que les téléchargements ne se produisent pas. Téléchargez donc le fichier pour vérifier le code et l'installer sur votre propre serveur PHP.

Le code ci-dessus fonctionne, mais l'utilisateur ne sait pas si le téléchargement de fichiers a démarré, terminé ou échoué. Vous devez lire le dernier numéro de cette série: Comment créer une barre de progression de téléchargement de fichiers dans HTML5 et JavaScript …

FAQ (FAQ) À propos de HTML5 Ajax Fichier Upload

(La partie FAQ est omise ici parce que cette partie n'a rien à voir avec les objectifs pseudo-originaux et est plus long. Il est normal de conserver la FAQ, mais la langue doit être réorganisée pour la rendre cohérente avec le style global de la Article.)

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!