Explication détaillée du téléchargement de fichiers glisser-déposer HTML5: traitement des fichiers client et téléchargement de serveur asynchrone

How to Use HTML5 File Drag and Drop

Points de base

HTML5 prend en charge les fichiers de glisser-déposer sur les éléments de la page Web et d'analyser les fichiers de glisser-déposer dans JavaScript, de charger et d'analyser les fichiers sur le client, de télécharger des fichiers de manière asynchronique sur le serveur à l'aide de XMLHTTPRequest2, et d'affichage de progrès graphiques pendant le téléchargement. .
Le support du navigateur peut être inégal en raison de l'utilisation de la dernière technologie HTML5. Les versions actuelles de Firefox et Chrome Support toutes les fonctionnalités, tandis que l'opéra, IE et la prise en charge de Safari sont limités ou non pris en charge.
Pour activer la glissement et la suppression du fichier, les événements JavaScript doivent être joints à l'élément d'entrée de fichier et à l'élément #FileDrag. L'élément #FileDrag doit également être affiché et le bouton de soumission de formulaire doit être masqué.
L'API de fichier W3C fournit des objets pour les opérations de fichiers, y compris FileList, Fichier et FileReader, qui permettent aux tableaux de représentation des fichiers sélectionnés, des fichiers individuels et de la lecture de données de fichiers sur le client et de les utiliser dans JavaScript, respectivement.

Fixer des fichiers de bureau glisser et déposer dans le navigateur est l'un des objectifs ultimes de l'intégration des applications Web. Il s'agit de la première partie d'une série d'articles en quatre parties, qui introduit comment: 1. Activer les fichiers de glisser-déposer sur les éléments Web; 4. Téléchargez des fichiers de manière asynchronique à l'aide de XMLHTTPRequest2; Afficher les barres de progrès graphiques pendant le téléchargement; 6. Utilisez des améliorations progressives pour vous assurer .

Défi de compatibilité du navigateur

Avant de commencer, ce tutoriel implique certaines des dernières technologies HTML5, donc le support devrait être inégal. Le code fonctionne maintenant, mais l'API peut changer et le navigateur continue d'évoluer. - Les dernières versions de Firefox et Chrome prennent en charge toutes les fonctionnalités et fonctionnent parfaitement. - Opera peut analyser les fichiers dans JavaScript, mais n'implémente pas le fichier glisser-déposer et le téléchargement XMLHTTPRequest2. - Les versions de bureau de IE et Safari ne prennent en charge aucune API. - Apple a désactivé des formulaires de téléchargement de fichiers HTML sur les versions iPhone et iPad de Safari. est-ce que quelqu'un sait pourquoi?

Enfin, veuillez noter que mon code montre le concept de base. Il y a très peu de vérifications d'erreur et vous devez vous ajuster pour votre système de production.

html et css

Il s'agit d'un formulaire standard avec le type d'entrée de fichier. La seule fonctionnalité HTML5 est la propriété "multiple", qui permet à l'utilisateur de sélectionner n'importe quel nombre de fichiers. Nous téléchargeons des fichiers sur le serveur exécutant PHP, mais le code est presque le même, quelle que soit la technologie que vous utilisez. La valeur cachée max_file_size spécifie 300 000 octets - PHP utilise cette valeur, mais nous le vérifions également sur le client pour empêcher le téléchargement de fichiers volumineux.

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

Copier après la connexion

L'élément FileDrag sera utilisé comme l'emplacement de glisser-déposer de fichier. Cet élément est caché dans CSS, mais si le glisser-déposer est pris en charge, il sera activé en javascript:

#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

Copier après la connexion

Nous définissons également une classe .hover qui change de style lorsque l'utilisateur fait glisser un fichier sur un élément. Le navigateur ne s'appliquera pas: le style de survol dans ce cas, mais lorsque l'événement se produit, nous pouvons ajouter des classes à l'aide de JavaScript.

API de fichier

L'API de fichier W3C fournit certains objets. Nous utiliserons: - FileList: un tableau représentant le fichier sélectionné. - Fichier: représente un seul fichier. - FileReader: une interface qui nous permet de lire des données de fichiers sur le client et de les utiliser dans JavaScript.

Événement JavaScript ci-joint

Il est temps de commencer à utiliser du javascript. Nous n'utilisons pas la bibliothèque JavaScript, donc pour enregistrer nos doigts de frappe, nous créerons plusieurs fonctions d'assistance pour retourner les éléments par ID et les messages d'état de la sortie:

// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

// 输出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

Copier après la connexion

Nous allons maintenant vérifier si l'API de fichier est disponible et appeler la fonction init ():

// 调用初始化文件
if (window.File && window.FileList && window.FileReader) {
    Init();
}

// 初始化
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    // 文件选择
    fileselect.addEventListener("change", FileSelectHandler, false);

    // XHR2是否可用？
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {

        // 文件拖放
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        // 移除提交按钮
        submitbutton.style.display = "none";
    }

}

Copier après la connexion

init () Fonction: 1. Définissez l'écouteur d'événements "Modifier" pour l'élément d'entrée de fichier. 2. Afficher l'élément #FileDrag. 3. Définissez les écouteurs d'événements "Dragover" et "DragLeave" pour modifier le style des éléments #FileDrag. 4. Définissez l'écouteur d'événements "Drop" pour l'élément #FileDrag. 5. Masquer le bouton de soumission de formulaire - puisque nous analyserons et téléchargerons le fichier sélectionné, il n'est pas nécessaire.

Vous pouvez choisir de masquer les éléments d'entrée de fichier lors de la prise en charge de la glissement et de la département du fichier. Personnellement, je préfère offrir les deux options car le glisser-déposer apporte des problèmes de convivialité. La vérification de la méthode xmlhttprequest.upload peut éviter les problèmes dans l'opéra. Le navigateur prend en charge le fichier, FileList et FileReader, mais ne prend pas en charge les événements de glisser-déposer ou xmlhttprequest2. Il peut donc afficher des informations sur le fichier, mais nous ne voulons pas afficher l'élément #FileDrag ou supprimer le bouton Soumettre.

Fichier Fichier File Changement de style

Certaines personnes ont expérimenté la traînée de fichiers et la dépôt de leurs navigateurs Web. En fait, les utilisateurs Web expérimentés peuvent penser que c'est impossible. Nous avons donc utilisé un élément qui déclare "glisser et déposer des fichiers ici". Nous voulons également indiquer quand faire glisser et déposer un fichier à l'emplacement #FileDrag en modifiant son style:

// 文件拖放悬停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

Copier après la connexion

Analyser les fichiers glisser-déposer ou sélectionnés

Que ce soit à l'aide de "Browse" pour sélectionner un ou plusieurs fichiers ou glisser et déposer des fichiers à l'emplacement #FileDrag, nous utilisons la même fonction FileSelectHandler ():

// 文件选择
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);
    }

}

Copier après la connexion

Cette fonction: 1. Appelez FileDragHover () pour supprimer le style de survol et annuler l'événement du navigateur. Ceci est crucial, sinon le navigateur peut essayer d'afficher le fichier. 2. Obtenez l'objet FileList. Cela proviendra de la zone d'entrée de fichier (e.target.files) ou de l'élément #FileDrag (e.datatransfer.files). 3.

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

Copier après la connexion

Cette fonction utilise trois principaux attributs en lecture seule fournis par l'objet de fichier pour la sortie des informations: -.name: nom de fichier (exclusion des informations sur le chemin) -.type: type mime, telles que l'image / jpeg, le texte / plaine, etc. . -.Size: Taille du fichier (en octets).

Veuillez consulter la page de démonstration dans Firefox, Chrome ou Opera (pas de prise en charge de glisser-déposer). Vous pouvez également télécharger des fichiers pour vérifier le code. Nous avons couvert beaucoup. Dans mon prochain article, nous en apprendre davantage sur comment utiliser HTML5 et JavaScript pour ouvrir des fichiers glisser-déposer … Cet article a également été traduit en arménien si vous le souhaitez Lisez cet article et vous aimerez l'apprentissage; un endroit pour apprendre les dernières compétences et techniques des Masters. Les membres peuvent accéder instantanément à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, tels que le monde réel HTML5 et CSS3. Les commentaires de cet article ont été fermés. Avez-vous des questions sur HTML5? Pourquoi ne pas poser de questions sur notre forum? FAQ sur le fichier html5 glisser et déposer *

(La partie FAQ suivante a été omise en raison de la durée de l'article. Si nécessaire, vous pouvez demander séparément une traduction de la partie FAQ.)

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!