API de Arquivo

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript introduzem o suporte para API de Arquivo. A API de Arquivo é uma especificação da Web de rascunho elaborada pelo W3C (World Wide Web Consortium) para representar objetos de arquivo em aplicativos Web, além de selecioná-los e acessar seus dados por meio de programação. A API de Arquivo está sendo padronizada pelo Grupo de Trabalho de Aplicativos Web do W3C. Usando a API de Arquivo, os desenvolvedores da Web podem acessar arquivos locais no computador cliente com segurança sem precisar de extensões nem plug-ins.

Experiências tranquilas de carregamento de arquivos

A API de Arquivo permite que um navegador ou aplicativo leia e manipule arquivos, mas somente se o usuário der permissão para isso. Além disso, ela proporciona experiências de carregamento de arquivos mais tranquilas sem plug-ins.

No seguinte exemplo da API de Arquivo do W3C, blocos de código diferentes lidam com condições de progresso, erro e êxito:


function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read.
  }
}


O construtor de blobs

O construtor Blob capacita um desenvolvedor da Web a manipular um blob (em geral, equivalente a um arquivo) diretamente no cliente. O construtor é definido na especificação File API do W3C, que atualmente se encontra no estágio Rascunho de Trabalho.

Em versões mais antigas da File API, você pode ler arquivos, mas não podia editá-los diretamente no cliente. Você podia fazer alterações em uma representação de um arquivo, mas para salvar essa edições precisava carregar o arquivo e as edições para um servidor, processando tudo no servidor, em seguida, baixando o arquivo alterado. Com o construtor Blob você pode facilmente criar um Blob a partir de uma matriz. A matriz pode incluir outros objetos Blob , cadeias de texto ou buffers de matriz e você passa a matriz para o blob como um parâmetro ao criá-lo.

Um objeto dictionary opcional pode ser adicionado como um segundo parâmetro, e pode incluir dois membros: type e endings.

O exemplo a seguir (do Internet Explorer 10 ou posterior) demonstra esse processo de forma sucinta:


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Saving Files Locally</title>
</head>

<body>
  <h1>Saving Files Locally</h1>
  <script>
    //check for Blob availability
    if (typeof Blob !== "undefined") {
      demoBlobs();
    } else {
      //your fallback code here
    }

    function demoBlobs(){  
      //create a Blob with an array and the optional dictionary object.
      var blob1 = new Blob(
        ["There are 10 kinds of people ", "in the world.\r\n"], //array
        { type: "text/plain", endings: "native" } //dictionary object
      );

      //create a second blob that uses the first blob in its array
      var blob2 = new Blob([blob1, "Those who understand binary and those who don't."]);

      // Save the blob1 content to a file, giving just a "Save" option
      window.navigator.msSaveBlob(blob1, 'msSaveBlob_testFile.txt'); 
      alert('File saved using msSaveBlob() - note the single "Save" button below.');
  
      // Save the blob2 content to a file, giving both "Save" *and* "Open" options
      window.navigator.msSaveOrOpenBlob(blob2, 'msSaveBlobOrOpenBlob_testFile.txt'); 
      alert('File saved using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>


Os métodos msSaveBlob() e msSaveOrOpenBlob() permitem que um usuário salve o Blob em seu computador, como se ele fosse um arquivo baixado da Web. Os arquivos são salvos na pasta Downloads por padrão.

A diferença entre msSaveBlob() e msSaveOrOpenBlob() é que o método msSaveBlob() fornece apenas um botão Salvar para o usuário. O método msSaveOrOpenBlob() fornece os botões Salvar e Abrir. A execução do código de exemplo acima (no Internet Explorer 10 ou posterior) deve esclarecer essa questão.

Outras melhorias

Outras melhorias relacionadas aos arquivos incluem múltiplos carregamentos de arquivos (4 GB por arquivo) com filtragem do tipo de arquivo. No exemplo a seguir, vários arquivos GIF ou JPEG podem ser selecionados pelo usuário:


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

Para saber mais, veja a seção "Estado de carregamento de arquivo (tipo=arquivo)" da especificação HTML5.

Referência de API

File API

Amostras e tutoriais

Como gerenciar arquivos locais

Demonstrações do Test Drive do Internet Explorer

BlobBuilder
Inspetor de arquivos binários

Postagens no blog do IE

Novo construtor de blob no IE10
Criando arquivos com o BlobBuilder
HTML5, pronto para site e experimental
Trabalhando com dados binários usando matrizes digitadas

Especificação

API de Arquivo

Tópicos relacionados

Carregamento com a API de arquivo

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.