Maison > Article > interface Web > Introduction à la méthode d'implémentation de lecture des fichiers image par readAsDataURL en JavaScript

Introduction à la méthode d'implémentation de lecture des fichiers image par readAsDataURL en JavaScript

黄舟original: 2017-05-14 10:15:373000parcourir

Cet article présente principalement en détail la méthode JavaScript d'utilisation de readAsDataURL pour lire les fichiers image. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

FileReader peut encoder le fichier lu dans une URL de données. L'URL de données est une technologie spéciale qui peut intégrer des données (telles que des images) dans des pages Web sans les placer dans des fichiers externes. L'avantage de l'utilisation de Data URL est que vous n'avez pas besoin d'émettre une requête HTTP supplémentaire au serveur pour obtenir des données supplémentaires ; l'inconvénient est que la taille de la page Web peut devenir plus grande. Il convient aux applications qui intègrent de petites images. Il n'est pas recommandé d'encoder des fichiers image volumineux dans des URL de données à utiliser. Votre fichier image ne peut pas dépasser la taille limite du navigateur, sinon le fichier image ne pourra pas être lu.

Reportez-vous à l'exemple suivant d'utilisation de readAsDataURL pour lire des fichiers image :

<!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>

La méthode readAsDataURL utilisera la base 64 pour l'encodage. Les données codées commencent par la chaîne de données. , suivi de Il s'agit du type MIME, puis la chaîne base64 est ajoutée. Après la virgule se trouve le contenu du fichier image encodé.

Utilisez Img pour afficher les fichiers image

Si vous souhaitez afficher le fichier image lu directement sur la page Web, vous pouvez créer une balise a1f02c36ba31691bcfe87b2722de723b via JavaScript, puis la définir.

est l'URL des données, puis ajoutez la balise a1f02c36ba31691bcfe87b2722de723b au DOM, comme indiqué dans l'exemple suivant :

<!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>

Lire une partie du fichier

Parfois, le fichier que vous souhaitez lire est trop volumineux et vous souhaitez le lire par segments ; ou vous souhaitez uniquement

lire le contenu de la partie du fichier. peut couper le fichier, selon le navigateur. , vous pouvez utiliser les méthodes suivantes : webkitSlice : convient aux navigateurs prenant en charge le moteur Webkit, tels que
Chrome. mozSlice : pour Firefox.
Ces deux méthodes doivent transmettre l'octet de début
index et l'octet de fin index. L'index commence par 0. L'exemple de programme suivant utilise la méthode readAsBinaryString de l'objet FileReader pour lire un fichier et lit uniquement le troisième octet jusqu'au sixième octet du fichier :

<!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>

Veuillez noter :

Différents navigateurs ont différents niveaux de prise en charge de HTML 5. Le code ci-dessus peut être exécuté normalement dans Chrome, mais il peut ne pas fonctionner correctement dans

d'autres navigateurs implémentés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage de code sur la façon dont JavaScript utilise ZeroClipboard pour faire fonctionner le presse-papiersArticle suivant：Partage de code sur la façon dont JavaScript utilise ZeroClipboard pour faire fonctionner le presse-papiers

Articles Liés

Voir plus