In diesem Artikel wird erläutert, wie Sie den absoluten Pfad eines Bildes in ein Dateiobjekt in HTML5 konvertieren und für alle freigeben. Die Details lauten wie folgt:
Informationen zum Konvertieren des absoluten Pfads des Bildes in die Base64-Kodierung finden Sie in diesem Artikel
Lassen Sie uns zunächst die grundlegenden Wissenspunkte verstehen:
1. Verstehen Sie das FileList-Objekt und das Dateiobjekt in HTML5.In HTML5 stellt ein FileList-Objekt eine Liste der vom Benutzer ausgewählten Dateien dar. Durch Hinzufügen des Multipe-Attributs können innerhalb der Dateisteuerung mehrere Dateien gleichzeitig ausgewählt werden. Jede vom Benutzer ausgewählte Datei im Steuerelement ist ein Dateiobjekt, und das FileList-Objekt ist eine Liste von Dateiobjekten. Stellt alle vom Benutzer ausgewählten Dateien dar. Schauen wir uns zunächst eine einfache Demo an, um zu sehen, welche Attribute das Dateiobjekt hat. Der folgende Code:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Select:</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; Alle ausgewählten Dateien zurückgeben for (var i = 0, ilen = files.length; i < ilen; i++) { // Die Informationen eines einzelnen Dateiobjekts ausgeben console.log(files[i]); Die Informationen lauten wie folgt: Datei { lastModified: 1457946612000 lastModifiedDate: Mo, 14. März 2016, 17:10:12 GMT+0800 (CST) {} Name: test.html Größe: 796 Typ: text/html webkitRelativePath: */ /* Wenn ein Bild hochgeladen wird, werden die folgenden Informationen zurückgegeben: Datei { lastModified: 1466907500000 lastModifiedDate: So 26. Juni 2016 10: 18:20 GMT+0800 (CST) {} Name: a.jpg Größe: 23684 Typ: image/jpeg webkitRelativePath: } */ /* Wenn Sie also feststellen müssen, ob es sich bei der hochgeladenen Datei um eine Bilddatei handelt, können Sie anhand des Typs wie folgt beurteilen: var file = files[i]; if (! /image// /w+/.test(file.type)) { console.log('Diese Datei ist keine Bilddatei'); } else { console.log('Diese Datei ist eine Bilddatei'); Wenn Sie jedoch nur Bilder übertragen möchten, können Sie dem Bildsteuerelement ein Attribut „accept=image/*“ hinzufügen. Wir können den Code wie folgt schreiben: <input type='file' multiple Accept = 'image/gif,image/jpeg ,image/ jpg,image/png' /> */ } } </script> </body></html> 2. Blob-Objekte verstehenWichtige Punkte: In HTML5 wird ein neues Blob-Objekt hinzugefügt, um die ursprünglichen Binärdaten darzustellen. Tatsächlich erbt das Dateiobjekt auch das Blob-Objekt.
Das Blob-Objekt verfügt über zwei Attribute. Das Größenattribut stellt die Bytelänge eines Blob-Objekts dar, und das Typattribut stellt den MIME-Typ des Blobs dar. Wenn es sich um einen unbekannten Typ handelt, wird eine leere Zeichenfolge zurückgegeben.
Bitte schauen Sie sich den folgenden Code an:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Datei auswählen:</label> <input type=file id=file / > <input type=button value=Dateiinformationen anzeigen onClick=showFileType() /> <p>Dateibytelänge: <span id=size></span></p> <p>Dateityp: <span id=type></span></p> </div> <script> function showFileType() { var file; Erste vom Benutzer ausgewählte Datei abrufen file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Länge der Datei in Bytes anzeigen size.innerHTML = file.size; Zeigen Sie den Dateityp an. type.innerHTML = file.type; // Öffnen Sie die Konsole, um das zurückgegebene Dateiobjekt anzuzeigen console.log(file); } </script> </body></html>Hinweis: Blob und File können gleichzeitig verwendet werden, und FileReader kann zum Lesen von Daten aus Blob verwendet werden.
Das Folgende ist eine absolute Pfadbildadresse, die in ein Base64-codiertes Bild konvertiert wird, und dann wird das Base64-codierte Bild in ein Blob-Objekt konvertiert. Der Code lautet wie folgt:
<!DOCTYPE html><html> <head> <title>Base64-Bild-URL-Daten in Blob konvertieren</title> </head> <body> <script> /** * Base64-Bild-URL-Daten für Blob konvertieren * @param urlData * Base64-Bilddaten ausgedrückt im URL-Modus */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL; base64.type; var bytes = window.atob(urlData.split(',')[1]); //Entfernen Sie den Header der URL und konvertieren Sie ihn in Byte //Behandeln Sie Ausnahmen und konvertieren Sie den ASCII-Code kleiner als 0 in größer als 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}); Canvas = document.createElement(Canvas); Canvas.width = img.width; Canvas.height = img.height; 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, type: image/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXbXFXXSutbFXXX.jpg; var image = new Image(); image.src = img; (){ var base64 = getBase64Image(image); console.log(base64); Die Druckinformationen lauten wie folgt: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64); /* Die Druckinformationen lauten wie folgt : Blob {size: 9585 , type: image/jpg} */ } </script> </body></html>Hinweis: In HTML5 wird ein neues Blob-Objekt hinzugefügt, um die ursprünglichen Binärdaten darzustellen. Tatsächlich erbt das Dateiobjekt auch das Blob-Objekt. Daher können wir die absolute Adresse des Bildes verwenden, um es in ein Dateiobjekt umzuwandeln.
Daher können wir die absolute Adresse des Bildes verwenden, um es in ein Dateiobjekt umzuwandeln. Für eine detaillierte Demo können Sie die Bild-Upload-Steuerung auf meinem Git sehen. Das Plug-in unterstützt das Hochladen von Bildern, und dann habe ich das plötzlich gefunden Wenn ich zur Bearbeitungsseite gehe, kann ich auch das Standardbild anzeigen. Gleichzeitig wird das Hochladen neuer Bilder standardmäßig unterstützt, oder das Löschen aller Bilder Ich habe die absolute Adresse des Bildes erhalten, daher habe ich mich gefragt, wie ich die absolute Adresse des Bildes in ein Dateiobjekt umwandeln kann. Wenn ich diesen Code nicht verwende, wird var reader = new FileReader(); meldet einen Fehler, sodass Sie es zuerst mit dem oben besprochenen Blob-Objekt in ein Blob-Objekt konvertieren und dann das Dateioperationsobjekt fileReader verwenden können.
Detaillierten Code finden Sie in der Bild-Upload-Steuerung auf meinem Git (https://github.com/tugenhua0707/html5UploadImage). Den Effekt finden Sie unter https://tugenhua0707.github.io/html5UploadImage/index.html
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.