Code d'instance de téléchargement de téléchargement de fichiers HTML5

L'API de fichier fournie dans HTML5 a une multitude d'applications dans le front-end. Et la compatibilité de chaque navigateur est également meilleure, y compris le terminal mobile, à l'exception de IE ne prend en charge que la version de IE10 ou plus. Si vous souhaitez mieux maîtriser la fonction du fichier d'opération, vous devez d'abord familiariser l'API.

L'étiquette d'entrée [type = fichier] dans HTML a un attribut multiple, permettant aux utilisateurs de choisir plusieurs fichiers, et l'objet FileList signifie une liste de fichiers sélectionnés par l'utilisateur. Chaque fichier de cette liste est un objet de fichier.

1. L'attribut de l'objet de fichier:
2. Nom: nom de fichier, n'inclut pas les chemins.
3. Type: type de fichier. Les fichiers de type de fichier commenceront par Image /, qui peuvent être limités au téléchargement de l'image.
4. Taille: taille du fichier. D'autres opérations peuvent être effectuées en fonction de la taille du fichier.
5. LastModify: le temps de modification final du fichier.

 <input type = file id = files multiples> <cript> var elem = document.getElementByid ('files'); est des images et la taille du fichier est inférieure à 200kb if (fichiers [i] .type.indexof ('image /')! == -1 && files [i] .size <204800) {console.log (fichiers [i] .Name);}}} </script>

Il existe un attribut d'accès dans l'entrée qui peut être utilisé pour spécifier le type de fichier qui peut être soumis par téléchargement de fichiers.

Accept = Image / * peut être utilisé pour limiter uniquement pour télécharger des formats d'image. Cependant, il y a un problème avec une réponse lente sous le navigateur WebKit.

La solution consiste à modifier le * passage vers le type MIME spécifié.

 <entrée type = fichier accepte = image / gif, image / jpeg, image / jpg, image / png>

L'objet BLOB équivaut à un conteneur qui peut être utilisé pour stocker des données binaires. Il a deux attributs, l'attribut de taille représente la longueur d'octets et l'attribut de type représente le type MIME.

Comment créer

L'objet BLOB peut être créé à l'aide de la fonction BLOB ().

 var blob = new blob (['hello'], {type: text / plain});

Le premier paramètre dans le constructeur blob est un tableau qui peut stocker des objets ArrayBuffer, des objets ArrayBufferview, des objets Blob et une chaîne.

L'objet BLOB peut renvoyer un nouvel objet BLOB via la méthode Slice ().

 var newblob = blob.slice (0,5, {type: text / plain});

La méthode Slice () utilise trois paramètres, tous facultatifs. Le premier paramètre représente la position de début des données binaires dans l'objet BLOB, le deuxième paramètre représente la fin de la réplication, et le troisième paramètre est le type MIME de l'objet BLOB.

Canvas.toblob () peut également créer des objets blob. ToBlob () utilise trois paramètres, le premier est la fonction de rappel, la seconde est le type d'image, la valeur par défaut est l'image / png, la troisième est la qualité de l'image, la valeur est comprise entre 0 et 1.

 var canvas = document.getElementById ('canvas'); canvas.toblob (fonction (blob) {console.log (blob);}, image / jpeg, 0,5);

Les objets BLOD peuvent générer une adresse réseau via l'objet Window.url, combiné avec l'attribut de téléchargement de la balise A pour réaliser la fonction de téléchargement du fichier.

Par exemple, téléchargez le canevas comme fichier photo.

 var canvas = document.getElementById ('canvas'); canvas.toblob (fonction (blob) {// utilisez CreateObjecturn pour générer une adresse, le format est Blob: NULL / FD95B806-DB11-4F98-B98-B. 2CE-5EB16B38BA36 var url = url.createObject "blob); var a = document.createelement ('a'); a.Download = 'canvas'; a.href = url; // simule une balise à télécharger a.click (); / / Dites au navigateur après le téléchargement.

La chaîne peut également être enregistrée en tant que fichier texte avec une méthode similaire.

L'objet FileReader est principalement utilisé pour lire le fichier en mémoire et lire les données du fichier. Créez un objet FileReader en construisant une fonction

 var Reader = new FilereReader ();

L'objet a les méthodes suivantes:

1. Aborte: Interruption de lecture de lecture.
2. ReadasArrayBuffer: Lisez le contenu du fichier dans l'objet ArrayBuffer.
3. Readasbinarystring: lire les fichiers sous forme de données binaires.
4. ReadaSDataurl: Lisez le fichier comme un format de données: URL.
5. Readastext: Lisez les fichiers sous forme de texte.

L'application commune consiste à afficher l'image via readAsDataurl () après avoir téléchargé des images sur le client.

 <input type = file id = files accepte = image / jpeg, image / jpg, image / png> <img src = blank.gif id = préview> <cript> var elem = d ('file'), img = document. GetElementById ('Aperçu'); .src = ev.target.result;} reader.readasdataurl (fichiers [0]);}} </cript>

Cependant, lorsque vous prenez des photos sur certains téléphones portables, il y aura des bugs lors du téléchargement de photos, et les photos seront trouvées, y compris Samsung et iPhone. Essence Essence La solution n'explique pas ici.

Readastext () de l'objet FileReader peut lire le texte du fichier, combiné avec la fonction de l'objet BLOB pour télécharger le fichier, puis le fichier d'exportation de données est sauvegardé vers la zone locale. via l'entrée et l'utilisation de readastext () pour utiliser readastext () lire du texte et restaurer les données.

Le code est similaire à la fonction ci-dessus.

Des méthodes ATOB et BTOA sont ajoutées à HTML5 pour prendre en charge l'encodage Base64. Leur dénomination est également très simple.

 var a = https: //lin-xin.github.io; iconsole.log (b);

La méthode BTOA code la chaîne A, qui ne modifiera pas la valeur de A, et renvoie une valeur après un encodage.

La méthode ATOB décode la chaîne codée.

Cependant, les chinois dans les paramètres ont dépassé la plage de caractères du codage ASCII à 8 bits, et le navigateur rapportera une erreur. Par conséquent, vous devez d'abord coder l'EncodeuriComponent.

 var a = Hello World;

Ce qui précède est tout le contenu de cet article.