Maison > Article > interface Web > js utilise readAsDataURL pour lire l'exemple de code du fichier image

js utilise readAsDataURL pour lire l'exemple de code du fichier image

零下一度original: 2017-05-11 13:37:181543parcourir

Cet article présente principalement en détail la méthode JavaScript de lecture des fichiers image à l'aide de readAsDataURL. Les amis intéressés peuvent se référer à

FileReader La méthode readAsDataURL de l'objet peut. encodez le fichier lu dans une URL de données. L'URL de données est une technologie spéciale qui permet d'intégrer des données (telles que des images) dans une page Web sans les placer dans un fichier externe. 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 = "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 = "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 vous souhaitez lire Le fichier récupéré est trop volumineux et vous souhaitez le lire par segments ; ou vous souhaitez lire uniquement une partie du fichier. Dans ce cas, vous pouvez couper le fichier. Selon le navigateur, vous pouvez utiliser ce qui suit. méthodes :
webkitSlice : applicable Pour les navigateurs prenant en charge le moteur Webkit, tels que Chrome.
mozSlice : pour Firefox.
Ces deux méthodes doivent transmettre l'index d'octet de début et l'index d'octet de fin. 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 ="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 peut ne pas être exécuté correctement dans d'autres navigateurs.

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2 Manuel de référence en chinois JavaScript

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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：Explication détaillée de la gestion des exceptions asynchrones dans js et de l'utilisation du didacticiel DomianArticle suivant：Explication détaillée de la gestion des exceptions asynchrones dans js et de l'utilisation du didacticiel Domian

Articles Liés

Voir plus