Einführung in die Implementierungsmethode zum Lesen von Bilddateien durch readAsDataURL in JavaScript-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-05-14 10:15:37

Original

2965 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 -Tag erstellen und es dann auf src setzen Das

-Attribut ist die Daten-URL. Fügen Sie dann das -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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!