Heim > Artikel > Web-Frontend > js verwendet readAsDataURL, um Beispielcode für Bilddateien zu lesen

js verwendet readAsDataURL, um Beispielcode für Bilddateien zu lesen

零下一度Original: 2017-05-11 13:37:181543Durchsuche

In diesem Artikel wird hauptsächlich die JavaScript-Methode zum Lesen von Bilddateien mit readAsDataURL vorgestellt. Interessierte Freunde können sich auf die

FileReader-Methode des Objekts beziehen Codieren Sie die gelesene Datei in eine Daten-URL. Daten-URL ist eine spezielle Technologie, die Daten (z. B. Bilder) in eine Webseite einbetten kann, ohne sie in einer externen Datei abzulegen. Der Vorteil der Verwendung von Daten-URL besteht darin, dass Sie keine zusätzliche HTTP-Anfrage an den Server senden müssen, um zusätzliche Daten zu erhalten. Der Nachteil besteht darin, dass die Größe der Webseite größer werden kann. Es eignet sich für Anwendungen, die kleine Bilder einbetten. Es wird nicht empfohlen, große Bilddateien zur Verwendung in Daten-URLs zu kodieren. Ihre Bilddatei darf die Größenbeschränkung des Browsers nicht überschreiten, da die Bilddatei sonst nicht gelesen werden kann.

Siehe das folgende Beispiel für die Verwendung von readAsDataURL zum Lesen von Bilddateien:

<!DOCTYPE html>
<html xmlns = "www.w3.org/1999/xhtml" >
<head>
  <title> </title>
  <script type = "text/javascript" >
    function ProcessFile( e ) { 
      var file = document.getElementById(&#39;file&#39;).files[0];
      if (file) {
        
        var reader = new FileReader();
        reader.onload = function ( event ) { 
          var txt = event.target.result;
          document.getElementById("result").innerHTML = txt;
          };
       }
      reader.readAsDataURL( file );
      }
    function contentLoaded () {
      document.getElementById(&#39;file&#39;).addEventListener( &#39;change&#39; ,
ProcessFile , false );
    }
    window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
  </script>
</head>
<body>
  请选取一个图像文件: <input type = "file" id = "file" name = "file" />
  <p id = "result"> </p>
</body>
</html>

Die readAsDataURL-Methode verwendet Base-64 für die Codierung. Die codierten Daten beginnen mit der Datenzeichenfolge , gefolgt von Es ist der MIME-Typ, und dann wird die Base64-Zeichenfolge hinzugefügt. Nach dem Komma steht der Inhalt der codierten Bilddatei.
Verwenden Sie Img, um Bilddateien anzuzeigen

Wenn Sie die gelesene Bilddatei direkt auf der Webseite anzeigen möchten, können Sie über JavaScript ein a1f02c36ba31691bcfe87b2722de723b-Tag erstellen und es dann auf src setzen Attribut ist die Daten-URL, und fügen Sie dann das a1f02c36ba31691bcfe87b2722de723b-Tag zum DOM hinzu, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<html xmlns = "www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) { 
var file = document.getElementById(&#39;file&#39;).files[0];
if ( file ) {
 
var reader = new FileReader();
reader.onload = function ( event ) { 
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;
document.getElementById("result").appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
document.getElementById(&#39;file&#39;).addEventListener( &#39;change&#39; ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<p id = "result"> </p>
</body>
</html>

Teil der Datei lesen

Manchmal Sie möchten die abgerufene Datei zu groß lesen, oder Sie möchten nur einen Teil der Datei lesen. In diesem Fall können Sie die Datei wie folgt ausschneiden Methoden:
webkitSlice: anwendbar Für Browser, die die Webkit-Engine unterstützen, wie z. B. Chrome.
mozSlice: für Firefox.
Diese beiden Methoden müssen den Startbyte-Index und den Endbyte-Index übergeben. Der Index beginnt mit 0. Das folgende Programmbeispiel verwendet die readAsBinaryString-Methode des FileReader-Objekts zum Lesen einer Datei und liest nur das dritte bis sechste Byte der Datei:

<!DOCTYPE html>
<html xmlns ="www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById( &#39;file&#39; ).files[0];
if ( file ) {
var reader = new FileReader ();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById( "result" ).innerHTML = txt;
};
}
if ( file.webkitSlice ) {
var blob = file.webkitSlice( 2, 4 );
} else if ( file.mozSlice ) {
var blob = file.mozSlice( 2, 4 );
}
reader.readAsBinaryString( blob );
}
function contentLoaded() {
document.getElementById( &#39;file&#39; ).addEventListener( &#39;change&#39; ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<p id = "result" > </p>
</body>
</html>

Bitte beachten Sie:

Verschiedene Browser bieten unterschiedliche Unterstützungsstufen für HTML 5. Der obige Code kann in Chrome normal ausgeführt werden, wird in anderen Browsern jedoch möglicherweise nicht korrekt ausgeführt.

[Verwandte Empfehlungen]

1. Kostenloses JS-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonjs verwendet readAsDataURL, um Beispielcode für Bilddateien zu lesen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der asynchronen Ausnahmebehandlung in js und der Verwendung des Domian-TutorialsNächster Artikel：Detaillierte Erläuterung der asynchronen Ausnahmebehandlung in js und der Verwendung des Domian-Tutorials

In Verbindung stehende Artikel

Mehr sehen