Kommentar: Selbst wenn das Inline -Bild in Base64 codiert ist, besteht der Vorteil, dass es HTTP -Anfragen reduzieren kann. Der Nachteil ist jedoch, dass es nicht über Domänen zwischengespeichert werden kann. Verwenden Sie die ReadasDataurl -Funktion in der HTML5 -Datei -API. Dies ist ein Code, der die Datei in Base64 umwandelt.
Ich kam gerade mit dem Konzept der eingebrachten Bilder in Kontakt. Auch wenn die eingebrachten Bilder in Base64 codiert werden und sich den folgenden Code ansehen, handelt es sich um ein Inline -Problem.Es kann HTTP -Anfragen reduzieren, aber der Nachteil ist, dass es nicht über Domänen zwischengespeichert werden kann!
<img src = "Daten: Bild/jpeg; Base64,/9J/4QQSrx ...">
Dann, wie Sie Bilder in Base64 online umwandeln
Wenn Sie sich ausschließlich auf einfache JavaScript verlassen, haben Sie Erlaubnisprobleme und erlauben keine lokalen Dateidateien oder Ordner, für Sicherheitsprobleme zu arbeiten
Jetzt, da HTML5 nach Baidu kommt, gibt es viele Informationen über Chinesisch und viele andere Dokumente für W3C
Jetzt verwenden wir die ReadasDataurl -Funktion in der HTML5 -Datei -API, die eine Konvertierdatei in Base64 -Codierung ist.
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> Einfacher HTML5 -Dateitest für pic2base64 </title>
<Styles>
</style>
<Script>
window.onload = function () {
var input = document.getElementById ("Demo_Input");
var result = document.getElementById ("Ergebnis");
var img_area = document.getElementById ("img_area");
if (typeof (fileReader) === 'undefined') {
result.innerhtml = "Entschuldigung, Ihr Browser unterstützt nicht FileReader. Bitte verwenden Sie einen modernen Browser, um zu operieren!";
input.setAttribute ('deaktiviert', 'deaktiviert');
} anders {
input.adDeVentListener ('Change', ReadFile, False);}
}
Funktion ReadFile () {
var file = this.files [0];
// Hier beurteilen wir den Typ, wenn es sich nicht um ein Bild handelt, dann geben Sie ihn zurück und entfernen Sie ihn und laden Sie eine Datei hoch
if (!/image /// w+/. test (Datei.Type)) {
ALERT ("Bitte stellen Sie sicher, dass die Datei Bildtyp ist");
false zurückgeben;
}
var reader = new fileReader ();
Reader.ReadasDataurl (Datei);
Reader.onload = Funktion (e) {
result.innerhtml = '<img src = "'+this.result+'" />';
img_area.innerhtml = '<div> Bild img Tag Anzeige: < /div> <img src = "'+this.result+'" />';
}
}
</script>
</head>
<body>
<Eingabe type = "Datei" value = "sdgsdg" />
<textarea rows = 30 cols = 300> </textArea>
<p> </p>
</body>
</html>