1. API de fichier: (API de fichier)
Chaque fichier sélectionné par une commande de formulaire de type de fichier est un objet de fichier, et l'objet FileList est une liste de collecte de ces objets de fichier, représentant tous les fichiers sélectionnés. L'objet de fichier hérite d'un objet BLOB, qui représente les données brutes binaires et fournit une méthode de tranche pour accéder aux blocs de données d'origine à l'intérieur des octets. En bref, l'objet de fichier contient l'objet flielist et l'objet de fichier hérite de l'objet blob!
Relations d'attribut pertinentes de chaque objet:
Interface FileReader:
Comme on peut le voir sur la figure, HTML5 fournit également une interface FileReader: utilisée pour lire les fichiers dans la mémoire et lire des données dans le fichier.
var Reader = new FileReader ();
Il y a quatre méthodes et six événements au total pour cette interface:
• readasbinarystring (fichier): lire le fichier comme binaire
• readasdataurl (fichier): lire le fichier datationurl
• readastext (fichier, [codage]): lire le fichier en tant que texte
• À propos de (aucun): la lecture des fichiers d'interruption
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• Onabort: déclenché lors de la lecture des interruptions de fichiers
• onerror: déclenché lorsqu'une erreur se produit lorsqu'un fichier est lu
• OnloadStart: déclenché lors de la lecture du fichier démarre
• ONPROGRESS: continue de déclencher lors de la lecture du fichier
• Onload: déclenché lorsque le fichier est lu avec succès
• OnloadEnd: déclenché à la fin de la lecture du fichier (le succès et l'échec sont déclenchés)
Les paramètres d'événement ci-dessus e ont e.target.result ou this.result pointer le résultat de lecture!
2. API DRAGE et DROP:
Attribut glisser et déposer: définissez l'attribut glisserable de l'élément qui doit être glisser et déposé sur true (dragable = ”true”)! L'élément IMG et un élément peuvent être traînés et abandonnés par défaut.
Événements de glisser-déposer: (segmenté dans les événements d'élément de glisser-déposer et les événements d'élément cible)
Événements d'éléments de glisser-déposer:
• dragstart: déclenché avant de faire glisser
• Faites glisser, se déclenche en continu avant et après la traînée
• Dragend, l'extrémité de dragage se déclenche
Événement de l'élément cible:
• DragOsen, entrez l'élément cible pour déclencher
• Dragover, entre entrer dans la cible et sortir de la cible, déclenchant en continu
• dragleave, déclenchant l'élément cible
• Déposez, relâchez le déclencheur de la souris sur l'élément cible
mais! Il convient de noter que dans l'élément cible, le comportement par défaut doit être bloqué (Dragover et Drop sont refusés) dans les événements Dragover et Drop, sinon la glisser et la dépôt ne peut pas être implémentée!
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Objet DataTransfer: il est spécialement utilisé pour stocker des données à transporter pendant la glisser et la chute. Il peut être défini comme la propriété Datatransfer des événements de glisser-déposer.
3 attributs:
• Effectallowed: définissez les styles de curseur (aucun, copie, copyle, copymove, link, linkmove, déplacer, tout et non initialisé)
• Effet aallowed: définissez les effets visuels des opérations de traînée et de dépôt
• Types: type de données stockées, un pseudo-arrayage de chaînes
• Fichiers: obtenez le fichier glissé externe, renvoyez une liste FileList, il y a un attribut de type sous FileList, qui renvoie le type de fichier
4 Méthodes:
• setData (): définissez la clé de données et la valeur (doit être une chaîne)
• getData (): obtenir des données et obtenir la valeur correspondante en fonction de la valeur clé.
• clearData (): effacer les données stockées dans l'objet Datatransfer
• setDragImage (imageurl, journal x, long y): utilisez l'élément IMG pour définir l'icône glisser-déposer
//Exemple:
target.addeventListener ('dragstart', fonction (e) {
var fs = e.datatransfer.files; // obtient un objet de fichier glisser-déposer la liste des objets Flielist
var dt = e.datatransfer; // la propriété de datatransfer comme événement glisser-déposer
dt.Effectallowed = 'copy';
dt.setData ('text / plain', 'bonjour');
dt.setDragImage (dragicom, -10, -10);
});
3. Faites glisser et déposez l'image de téléchargement:
Idées:
1. Familiers avec les quatre événements de l'élément cible qui traîne le fichier. Remarque: Le comportement par défaut est bloqué dans les événements Ondragover et Onedrop.
2. Après avoir glisser et abandonné, obtenez la collection d'objets de fichier: e.datatransfer.files
3. Faire une boucle de chaque objet de fichier de la collection, jugez le type de fichier et la taille du fichier et effectuez des opérations correspondantes si le type est spécifié.
4. Lire Fichier Information Object: New FileReader (), qui a des méthodes telles que la lecture de l'objet de fichier comme DataUrl: readaSDataurl (objet de fichier), événements déclenchés après une lecture réussie: événement Onload, etc., ce.Result est la lecture des données
5. Effectuer un traitement logique correspondant dans plusieurs événements de l'objet FileReader
HTML:
<v> <p> Veuillez faire glisser le fichier image vers cette zone! </p> </div>
Nombre de charges totales: <span id = 'total'> 100 </span>
JQ:
<Script Type = "Text / Javascript"> $ (function () {/ * pensées: * 1. Soyez familier avec les quatre événements de l'élément cible de la cible glissant le fichier. Remarque: Le comportement par défaut est bloqué dans la collection d'objets de fichier: E.Datatransfer. Type spécifié * 4. $ (". Conteneur"). Get (0); var op = $ (". Texte"); OP.HTML ('Veuillez faire glisser le fichier image vers cette zone!');} // glisser et placer, le comportement par défaut doit être bloqué ODIV.ondrop = Fonction (E) {e.PreventDefault (); Collection // Longueur d'impression Console.log (Fs.Length); console.log (fs [i] .size); $ ("# Total"). OIMG.ATTR (SRC ", this.Result); $ (ODIV). Téléchargement, Ajax envoie le fichier, téléchargez le fichier binaire}}}} else {alert ('Veuillez télécharger le fichier d'image!');}}}}); </cript>Image de reproduction:
Résumé: combinaison des connaissances de l'API de l'événement glisser-déposer, objet DataTransfer et objet de lecture de fichiers FileList, etc., pour réaliser l'effet de prévisualisation du téléchargement simple de glisser-déposer des images. Vous devez connaître la relation et l'utilisation d'un objet et clarifier les idées de mise en œuvre!
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.