Exemples de téléchargement et de téléchargement de fichiers dans h5

Avant-propos

L'API de fichiers fournie en HTML5 a des applications riches dans le front-end. Le téléchargement, la lecture de contenu, etc. sont très courants dans les interactions quotidiennes. Et la compatibilité avec les différents navigateurs est relativement bonne, y compris les terminaux mobiles, sauf qu'IE ne prend en charge que les versions supérieures à IE10. Si vous souhaitez mieux maîtriser les fonctions d’exploitation des fichiers, vous devez d’abord vous familiariser avec chaque API.

Auteur original : Lin Xin, blog de l'auteur :

Objet FileList et objet fichier

La balise input[type="file"] en HTML a un attribut multiple, qui permet L'utilisateur sélectionne plusieurs fichiers et l'objet FileList représente la liste des fichiers sélectionnés par l'utilisateur. Chaque fichier de cette liste est un objet fichier.

Attributs de l'objet fichier :

• nom : nom du fichier, hors chemin.

• type : Type de fichier. Les fichiers de type image commenceront tous par image/, qui peut être utilisé pour limiter le téléchargement aux seules images.

• taille : taille du fichier. Des opérations supplémentaires peuvent être effectuées en fonction de la taille du fichier.

• lastModified : L'heure à laquelle le fichier a été modifié pour la dernière fois.

<input type="file" id="files" multiple><script>var elem = document.getElementById(&#39;files&#39;);elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){console.log(files[i].name);}}}</script>

Il existe un attribut d'acceptation dans l'entrée, qui peut être utilisé pour spécifier les types de fichiers pouvant être soumis via le téléchargement de fichiers.

accept="image/*" peut être utilisé pour restreindre le téléchargement aux seuls formats d'image. Cependant, il y a eu un problème de réponse lente sous le navigateur Webkit et il a fallu plusieurs secondes pour que la boîte de sélection de fichier apparaisse.

La solution consiste à remplacer le caractère générique * par le type MIME spécifié.

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

Objet Blob

L'objet Blob est équivalent à un conteneur et peut être utilisé pour stocker des données binaires. Il a deux attributs, l'attribut size représente la longueur en octets et l'attribut type représente le type MIME.

Comment créer

Les objets Blob peuvent être créés à l'aide du constructeur Blob().

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

Le premier paramètre du constructeur Blob est un tableau, qui peut stocker des objets ArrayBuffer, des objets ArrayBufferView, des objets Blob et des chaînes.

Les objets Blob peuvent 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épart des données binaires dans l'objet Blob à copier, le deuxième paramètre représente la position de fin de la copie 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, le second est le type d'image, la valeur par défaut est image/png et le troisième est la qualité de l'image, la valeur est comprise entre 0 et 1.

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

Télécharger le fichier

L'objet Blod peut générer une adresse réseau via l'objet window.URL et la combiner avec l'attribut download de la balise a à implémenter la fonction de téléchargement de fichiers.

Par exemple, téléchargez le canevas sous forme de fichier image.

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){// 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var url = URL.createObjectURL(blob);var a = document.createElement('a');a.download = 'canvas';a.href = url;// 模拟a标签点击进行下载a.click();// 下载后告诉浏览器不再需要保持这个文件的引用了URL.revokeObjectURL(url);});

Vous pouvez également enregistrer la chaîne sous forme de fichier texte avec une méthode similaire.

Objet FileReader

L'objet FileReader est principalement utilisé pour lire des fichiers en mémoire et lire les données du fichier. Créez un objet FileReader via le constructeur

var reader = new FileReader();

L'objet a les méthodes suivantes :

• abort : abandonne l'opération de lecture.

• readAsArrayBuffer : lit le contenu du fichier dans l'objet ArrayBuffer.

• readAsBinaryString : lit le fichier sous forme de données binaires.

• readAsDataURL : Lire le fichier sous forme de chaîne au format data : URL.

• readAsText : lit le fichier sous forme de texte.

Télécharger l'aperçu de l'image

Une application courante consiste à afficher l'image via readAsDataURL() après avoir téléchargé l'image sur le client.

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>var elem = document.getElementById(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;);elem.onchange = function () {var files = elem.files,reader = new FileReader();if(files && files[0]){reader.onload = function (ev) {img.src = ev.target.result;}reader.readAsDataURL(files[0]);}}</script>

Cependant, il y a un bug lors du téléchargement de photos lorsque vous prenez des photos verticalement sur certains téléphones mobiles, notamment Samsung et iPhone, et vous constaterez que les photos sont à l'envers. . . La solution ne sera pas expliquée ici. Si vous êtes intéressé, vous pouvez consulter : Solution pour la rotation et la compression du téléchargement d'images mobiles

Sauvegarde et récupération des données

ReadAsText() de l'objet FileReader peut lire le texte du fichier, combiné à la fonction de l'objet Blob pour télécharger des fichiers, il est possible de sauvegarder le fichier d'exportation de données vers le local Lorsque les données doivent être restaurées, téléchargez le fichier de sauvegarde via l'entrée et utilisez readAsText. () pour lire le texte et restaurer les données.

Le code est similaire à la fonction ci-dessus et ne sera pas répété ici. Pour des applications spécifiques, veuillez vous référer à : bloc-notes

Encodage Base64

De nouvelles méthodes atob et btoa sont disponibles. ajouté en HTML5 pour prendre en charge le codage Base64. Leurs noms sont également très simples, b à a et a à b, qui représentent l'encodage et le décodage.

var a = "lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a);     // https://lin-xin.github.ioconsole.log(b);     // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);     // https://lin-xin.github.io

La méthode btoa encode la chaîne a sans changer la valeur de a et renvoie une valeur codée.
La méthode atob décode la chaîne codée.

Mais le paramètre contient des caractères chinois, qui dépassent la plage de caractères du codage ASCII 8 bits, et le navigateur signalera une erreur. Par conséquent, le chinois doit d’abord être codé avec encodeURIComponent.

var a = "哈喽 世界";var b = btoa(encodeURIComponent(a));var c = decodeURIComponent(atob(b));console.log(b);     // JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThDconsole.log(c);     // 哈喽 世界

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!