js utilise readAsDataURL pour lire l'exemple de code du fichier image-js tutoriel-php.cn

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

零下一度

Libérer： 2017-05-11 13:37:18

original

1584 Les gens l'ont consulté

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>

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 = "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 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>

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