Introduction à la méthode d'implémentation de lecture des fichiers image par readAsDataURL en JavaScript-js tutoriel-php.cn

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

黄舟

Libérer： 2017-05-14 10:15:37

original

2965 Les gens l'ont consulté

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>

Copier après la connexion

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 via JavaScript, puis la définir.

est l'URL des données, puis ajoutez la balise 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>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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