js verwendet readAsDataURL, um Beispielcode für Bilddateien zu lesen-js-Tutorial-php.cn

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

零下一度

Freigeben： 2017-05-11 13:37:18

Original

1583 Leute haben es durchsucht

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>

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 Attribut ist die Daten-URL, und fügen Sie dann das -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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!