Nouvelles fonctionnalités HTML5 : opérations sur les fichiers et les données binaires

Historiquement, JavaScript ne peut pas gérer les données binaires. Si elles doivent être traitées, seul Vous peut utiliser la méthode charCodeAt() pour convertir le codage de texte en données binaires octet par octet. Une autre façon consiste à convertir les données binaires en codage Base64, puis à les traiter. Ces deux méthodes sont non seulement lentes, mais également sujettes aux erreurs. Un objet est introduit, permettant une manipulation directe des données binaires. L'

objet Bolb est un objet de base représentant des données binaires. Sur cette base, une série d' API, utilisé pour exploiter les fichiers

• Fichier objet : responsable du traitement des données binaires qui existent sous forme de fichiers, c'est-à-dire de l'exploitation des fichiers locaux

• Objet FileList : formulaire Web de l'objet File

  Interface

• Objet FileReader : responsable de la lecture des données binaires en mémoire

• Objet URL : utilisé pour générer une URL pour les données binaires

Objet Blob

Blob (Binary Large

Object) L'objet représente un élément de données binaires et fournit une série d'interfaces d'opération. D'autres API pour exploiter les données binaires (telles que les objets File) sont basées sur l'objet Blob et hérite de ses Propriétés. et méthodes. Il existe deux façons de générer un objet Blob : l'une consiste à utiliser le constructeur Blob et l'autre consiste à utiliser la méthode slice sur un objet Blob existant (1) Constructeur Blob, accepte deux paramètres. Le premier paramètre est un

tableau

contenant les données réelles, et le deuxième paramètre est le type des données. Aucun des paramètres n'est requis. 🎜>

Ce qui suit est un exemple d'utilisation d'un objet Blob pour générer un fichier téléchargeable

Le code ci-dessus génère un lien hypertexte vous invitant à télécharger. le fichier texte hello-world.txt lorsque vous cliquez dessus. Le contenu du fichier est "Hello World" (2) La méthode slice de l'objet Blob divise les données binaires en octets et renvoie un objet New Blob

var htmlParts = [&#39;<a id="a"><b id="b">hey!<\/b><\/a>&#39;];
var myBlob = new Blob(htmlParts, {&#39;type&#39;: &#39;text\/xml&#39;});

<🎜. >Ce qui suit est un exemple d'utilisation de l'objet XMLHttpRequest pour télécharger

var blob = new Blob(['Hello World']);var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.donwload = 'hello-world.txt';
a.textContent = 'Download Hello World';

body.appendChild(a);

(3) L'objet Blob a deux attributs en lecture seule :

<🎜. >

taille : taille des données binaires, en octets.

var newBlob = oldBlob.slice(startingByte, endindByte);

type : type MIME de données binaires, toutes en minuscules, si le type est inconnu, la valeur est vide

String

function upload(blobOrFile) {  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {  
var blob = this.files[0];  
var BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  var SIZE = blob.size;  var start = 0;  
  var end = BYTES_PER_CHUNK;  while(start < SIZE) {
    upload(blob.slice(start, end));

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

.

• En fonctionnement Ajax, si xhr.responseType est défini sur blob, des données binaires sont reçues.
  2. Objet FileList
• L'objet FileList est destiné au contrôle File

  du formulaire. Lorsque l'utilisateur sélectionne un fichier via le contrôle de fichier, la valeur de l'attribut files de ce contrôle est l'objet FileList. Sa structure est similaire à celle d'un tableau et contient plusieurs fichiers sélectionnés par l'utilisateur.

Lorsque l'utilisateur sélectionne le fichier, le fichier peut être lu.

Les objets FileList peuvent également être obtenus par glisser-déposer.

<input type="file" id="input" onchange="console.log(this.files.length)" multiple />

Le handleFileSelect dans le code ci-dessus est la fonction de rappel de l'événement glisser-déposer

var selected_file = document.getElementById('input').files[0];

Son paramètre evt est un événement. object Ce paramètre La propriété dataTransfer.files est un objet FileList qui contient les fichiers glissés et déposés.

3. Objet File

var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();    
    var files = evt.dataTransfer.files; // FileList object.

    // ...}

L'objet File est membre de l'objet FileList et contient des méta-informations sur le fichier, telles que le nom du fichier, l'heure de la dernière modification, la taille du fichier. et le type de fichier. Ses valeurs d'attribut sont les suivantes :

name : nom du fichier, cet attribut est en lecture seule

size : taille du fichier, en octets, l'attribut

type en lecture seule : type MIME du fichier. Si le type ne peut pas être distingué, ce sera une chaîne vide.

• lastModifiedDate : L'heure de la dernière modification du fichier. Cet attribut est en lecture seule.
4. Objet FileReader

• L'objet FileReader reçoit un objet File ou un objet Blob comme paramètre, qui est utilisé pour

  lire le contenu réel du fichier
, c'est-à-dire lire le contenu du fichier en mémoire. Pour différents types de fichiers, FileReader utilise différentes méthodes de lecture.

• • FileReader.readAsBinaryString(Blob|File) ：读取结果为二进制字符串，每个字节包含一个0到255之间的整数。

  • FileReader.readAsText(Blob|File, opt_encoding) ：读取结果是一个文本字符串。默认情况下，文本编码格式是'UTF-8'，可以通过可选的格式参数，指定其他编码格式的文本。

  • FileReader.readAsDataURL(Blob|File) ： 读取结果是一个基于Base64编码的 data-uri 对象。

  • FileReader.readAsArrayBuffer(Blob|File) ：读取结果是一个 ArrayBuffer 对象。

  FileReader采用异步方式读取文件，可以为一系列事件指定回调函数。

  • onabort：读取中断或调用reader.abort()方法时触发。

  • onerror：读取出错时触发。

  • onload：读取成功后触发。

  • onloadend：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。

  • onloadstart：读取将要开始时触发。

  • onprogress：读取过程中周期性触发。

  下面的代码是如何展示文本文件的内容。

  var reader = new FileReader();
  
  reader.onload = function(e){
         console.log(e.target.result);
  }
  
  reader.readAsText(blob);

  onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容。

  下面是一个使用readAsDataURL方法，为img元素添加src属性的例子。

  var reader = new FileReader();
  
  reader.onload = function(e) {
      document.createElement('img').src = e.target.result;
  
  };
  
  reader.readAsDataURL(f);

  下面是一个onerror事件回调函数的例子。

  var reader = new FileReader();
  reader.onerror = errorHandler;
  function errorHandler(evt) {    
  switch(evt.target.error.code) {      
  case evt.target.error.NOT_FOUND_ERR:
          alert('File Not Found!');        
          break;      
          case evt.target.error.NOT_READABLE_ERR:
          alert('File is not readable');        
          break;      
          case evt.target.error.ABORT_ERR:        
          break;      
          default:
          alert('An error occurred reading this file.');
      };
  }

  下面是一个onprogress事件回调函数的例子，主要用来显示读取进度。

  var reader = new FileReader();
  reader.onprogress = updateProgress;function updateProgress(evt) {    
  if (evt.lengthComputable) {      
  var percentLoaded = Math.round((evt.loaded / evt.totalEric Bidelman) * 100);      
        var progress = document.querySelector('.percent');      
        if (percentLoaded < 100) {
          progress.style.width = percentLoaded + &#39;%&#39;;
          progress.textContent = percentLoaded + &#39;%&#39;;
        }
      }
  }

  读取大文件的时候，可以利用Blob对象的slice方法，将大文件分成小段，逐一读取，这样可以加快处理速度。

  5、URL对象

  URL对象用于生成指向File对象或Blob对象的URL。

  var objecturl =  window.URL.createObjectURL(blob);

  上面的代码会对二进制数据生成一个URL，类似于“blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191”。这个URL可以放置于任何通常可以放置URL的地方，比如img标签的src属性。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的URL。

  这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个URL就失效。除此之外，也可以手动调用URL.revokeObjectURL方法，使URL失效。

  window.URL.revokeObjectURL(objectURL);

  下面是一个利用URL对象，在网页插入图片的例子。

  var img = document.createElement("img");
  
  img.src = window.URL.createObjectURL(files[0]);
  
  img.height = 60;
  
  img.onload = function(e) {
      window.URL.revokeObjectURL(this.src);
  }
  
  body.appendChild(img);var info = document.createElement("span");
  
  info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
  
  body.appendChild(info);

  还有一个本机视频预览的例子。

  var video = document.getElementById('video');var obj_url = window.URL.createObjectURL(blob);
  video.src = obj_url;
  video.play()
  window.URL.revokeObjectURL(obj_url);

  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!