Cet article explique comment convertir le chemin absolu d'une image en un objet fichier en HTML5 et le partager avec tout le monde. Les détails sont les suivants :
Pour convertir le chemin absolu de l'image en encodage base64, veuillez consulter cet article
Comprenons d’abord les points de connaissances de base :
1. Comprenez l'objet FileList et l'objet fichier en HTML5.En HTML5, un objet FileList représente une liste de fichiers sélectionnés par l'utilisateur. En ajoutant l'attribut multipe, plusieurs fichiers peuvent être sélectionnés à la fois dans le contrôle de fichier. Chaque fichier sélectionné par l'utilisateur dans le contrôle est un objet fichier et l'objet FileList est une liste d'objets fichier. Représente tous les fichiers sélectionnés par l'utilisateur. Examinons d'abord une démo simple pour voir quels attributs possède l'objet fichier. Le code suivant :
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Sélectionner :</label> <input type='file' multiple id= file /> <input type=button value=File upload onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; Renvoie tous les fichiers sélectionnés pour (var i = 0, ilen = files.length; i < ilen; i++) { // Imprimer les informations d'un seul objet fichier console.log(files[i]); les informations sont les suivantes : Fichier { lastModified : 1457946612000 lastModifiedDate : lundi 14 mars 2016 17:10:12 GMT+0800 (CST) {} nom : test.html taille : 796 type : text/html webkitRelativePath : */ /* Si une image est téléchargée, les informations suivantes seront renvoyées : File { lastModified : 1466907500000 lastModifiedDate : Sun Jun 26 2016 10 : 18h20 GMT+0800 (CST) {} nom : a.jpg taille : 23684 type : image/jpeg webkitRelativePath : } */ /* Par conséquent, si vous devez déterminer si le fichier téléchargé est un fichier image, vous pouvez juger en fonction du type comme suit : var file = files[i]; /image// /w+/.test(file.type)) { console.log('Ce fichier n'est pas un fichier image' } else { console.log('Ce fichier est un fichier image' }); Mais si vous souhaitez uniquement transférer des images, vous pouvez ajouter un attribut accept=image/* au contrôle image ; nous pouvons écrire le code comme suit : <input type='file' multiple accept = 'image/gif,image/jpeg ,image/ jpg,image/png' /> */ } } </script> </body></html> 2. Comprendre les objets BlobPoints clés : En HTML5, un nouvel objet Blob est ajouté pour représenter les données binaires d'origine. En fait, l'objet fichier hérite également de l'objet Blob.
L'objet Blob a deux attributs. L'attribut size représente la longueur en octets d'un objet Blob et l'attribut type représente le type MIME du Blob. S'il s'agit d'un type inconnu, une chaîne vide est renvoyée.
Veuillez regarder le code suivant :
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Sélectionner un fichier :</label> <input type=file id=file / > <input type=button value=Afficher les informations sur le fichier onClick=showFileType() /> <p>Longueur en octets du fichier : <span id=size></span></p> <p>Type de fichier : <span id=type></span></p> </div> <script> function showFileType() { var file; // Récupère le premier fichier sélectionné par l'utilisateur file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Afficher la longueur du fichier en octets size.innerHTML = file.size; Afficher le type de fichier type.innerHTML = file.type; // Ouvrir la console pour afficher l'objet fichier renvoyé console.log(file);Remarque : Blob et File peuvent être utilisés en même temps, et FileReader peut être utilisé pour lire les données de Blob.
Ce qui suit est une adresse d’image de chemin absolu qui est convertie en une image codée en base64, puis l’image codée en base64 est convertie en un objet blob. Le code est le suivant :
<!DOCTYPE html><html> <head> <title>Convertir les données d'URL d'image base64 en Blob</title> </head> <body> <script> /** * Convertir les données d'URL d'image base64 pour Blob * @param urlData * données d'image base64 exprimées en mode url */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL; base64.type; var bytes = window.atob(urlData.split(',')[1]); //Supprimez l'en-tête de l'url et convertissez-le en octet //Gérez les exceptions et convertissez le code ascii inférieur à 0 en supérieur à 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); } /* * Convertissez l'adresse du chemin absolu de l'image en codage base64 comme suit : */ function getBase64Image(img) { var toile = document.createElement(canvas); toile.largeur = img.largeur; toile.hauteur = img.hauteur = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase() ; var dataURL = canvas.toDataURL(image/+ext); return { dataURL : dataURL, tapez : image/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; var image = new Image(); (){ var base64 = getBase64Image(image); console.log(base64); Les informations d'impression sont les suivantes : { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64); : Blob {taille : 9585 , tapez : image/jpg} */ } </script> </body></html>Remarque : En HTML5, un nouvel objet Blob est ajouté pour représenter les données binaires d'origine. En fait, l'objet fichier hérite également de l'objet Blob. On peut donc utiliser l’adresse absolue de l’image pour la convertir en objet fichier.
Par conséquent, nous pouvons utiliser l'adresse absolue de l'image pour la convertir en un objet fichier. Pour une démonstration détaillée, vous pouvez voir le contrôle de téléchargement d'image sur mon git. Le plug-in prend d'abord en charge le téléchargement d'image, puis tout à coup, j'ai découvert cela. lorsque je vais sur la page d'édition, je dois afficher l'image par défaut. Vous pouvez également. En même temps, il est pris en charge de continuer à télécharger de nouvelles images lors de l'affichage des images par défaut, ou de supprimer toutes les images. Cependant, le développeur a seulement donné. moi l'adresse absolue de l'image, donc je me demandais comment convertir l'adresse absolue de l'image en un objet fichier Si je ne convertis pas Si elle devient un objet fichier, lors de l'utilisation de ce code, var reader =. new FileReader(); signalera une erreur, vous pouvez donc d'abord utiliser l'objet blob dont nous avons parlé ci-dessus pour le convertir en objet blob, puis vous pourrez utiliser l'objet d'opération de fichier fileReader.
Pour le code détaillé, veuillez consulter le contrôle de téléchargement d'image sur mon git (https://github.com/tugenhua0707/html5UploadImage). Pour l'effet, veuillez consulter https://tugenhua0707.github.io/html5UploadImage/index.html.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.