suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Implementierungsmethode zum Lesen von Bilddateien durch readAsDataURL in JavaScript

Einführung in die Implementierungsmethode zum Lesen von Bilddateien durch readAsDataURL in JavaScript

黄舟
黄舟Original
2017-05-14 10:15:373015Durchsuche

Dieser Artikel stellt hauptsächlich die JavaScript-Methode zum Lesen von Bilddateien mit readAsDataURL vor. Interessierte Freunde können sich darauf beziehen

FileReader object kann die gelesene Datei in eine Daten-URL kodieren. Daten-URL ist eine spezielle Technologie, die Daten (z. B. Bilder) in Webseiten einbetten kann, ohne sie in externen Dateien 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.

Beziehen Sie sich auf das folgende Beispiel für die Verwendung von readAsDataURL zum Lesen von Bilddateien: 

<!DOCTYPE html>
<html xmlns = "http://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 Das

-Attribut ist die Daten-URL. Fügen Sie dann das a1f02c36ba31691bcfe87b2722de723b-Tag zum DOM hinzu, wie im folgenden Beispiel gezeigt: 

<!DOCTYPE html>
<html xmlns = "http://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 ist die Datei, die Sie lesen möchten, zu groß und Sie möchten sie in Abschnitten lesen; in diesem Fall möchten Sie nur den Inhalt

der Datei lesen Wenn Sie die Datei ausschneiden können, können Sie je nach Browser die folgenden Methoden verwenden: webkitSlice: geeignet für Browser, die die Webkit-Engine unterstützen, wie z. B. Chr
ome. 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 Methode readAsBinaryString des FileReader-Objekts zum Lesen einer Datei und liest nur das dritte bis sechste Byte der Datei:

Bitte beachten Sie: 
<!DOCTYPE html>
<html xmlns ="http://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>


Verschiedene Browser bieten unterschiedliche Unterstützungsstufen für HTML 5. Der obige Code kann normal in Chrome ausgeführt werden, funktioniert jedoch möglicherweise nicht ordnungsgemäß in

anderen

Browsern.

Das obige ist der detaillierte Inhalt vonEinführung in die Implementierungsmethode zum Lesen von Bilddateien durch readAsDataURL in JavaScript. 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：Codefreigabe darüber, wie JavaScript ZeroClipboard zum Betrieb der Zwischenablage verwendetNächster Artikel：Codefreigabe darüber, wie JavaScript ZeroClipboard zum Betrieb der Zwischenablage verwendet

In Verbindung stehende Artikel

Mehr sehen