Файловый API

В Internet Explorer 10 и приложениях Магазина Windows на JavaScript добавлена поддержка файлового API. Файловый API — это рабочая версия спецификации консорциума W3C для представления файловых объектов в веб-приложениях, которая также позволяет программировать выбор таких объектов и предоставлять доступ к содержащимся в них данным. В настоящее время файловый API проходит процедуру стандартизации в рабочей группе консорциума W3C по веб-приложениям. С помощью файлового API разработчики веб-страниц получают безопасный доступ к локальным файлам на клиентском компьютере без использования расширений и подключаемых модулей.

Удобная отправка файлов

Файловый API позволяет читать файлы и управлять ими из браузера или приложения, но только с разрешения пользователя. Кроме того, файловый API обеспечивает более удобную отправку файлов без помощи подключаемых модулей.

В следующем примере файлового API консорциума W3C разные блоки кода обрабатывают условия выполнения, ошибки и успешного завершения:


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.
  }
}


Конструктор больших двоичных объектов

Конструктор Blob позволяет веб-разработчику создавать большие двоичные объекты (часто эквивалентные файлу) и управлять ими прямо на клиенте. Конструктор определен в спецификации консорциума W3C File API, которая сейчас находится на стадии рабочего проекта.

В более старых версиях спецификации Файловый API файлы можно было считывать, но возможность их редактирования напрямую в клиенте отсутствовала. Вы могли внести изменения в представление файла, но для сохранения этих изменений требовалось отправить файл и изменения на сервер, выполнить обработку всех данных на сервере и скачать измененный файл. С помощью конструктора Blob можно легко создавать Blob из массива. Массив может включать другие объекты Blob, текстовые строки или буферы массивов. Кроме того, массив можно передавать в большой двоичный объект как параметр при его создании.

Как второй параметр можно добавить дополнительный объект словаря, который может включать два элемента: type и endings.

Этот процесс кратко показан в следующем примере (Internet Explorer 10 или более поздние версии):


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


С помощью методов msSaveBlob() и msSaveOrOpenBlob() пользователь может сохранить Blob на свой компьютер, как если бы это был файл, скачанный из Интернета. По умолчанию эти файлы сохраняются в папке "Загрузки".

Различие между msSaveBlob() и msSaveOrOpenBlob() в том, что метод msSaveBlob() предоставляет пользователю только кнопку Сохранить. Метод msSaveOrOpenBlob() предоставляет и кнопку Сохранить, и кнопку Открыть. Запустите приведенный пример кода (в Internet Explorer 10 или более поздней версии), чтобы увидеть это на практике.

Другие улучшения

Другие улучшения, касающиеся файлов, включают возможность отправки нескольких файлов (каждый файл по 4 ГБ) с фильтрацией по типу файла. В следующем примере пользователь может выбрать несколько GIF- или JPEG-файлов.


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

Дополнительные сведения см. в разделе "File Upload state (type=file)" спецификации HTML5.

Справочник по API

File API

Примеры и учебники

Управление локальными файлами

Демонстрационные ролики Internet Explorer Test Drive

BlobBuilder
Binary File Inspector

Записи блога IEBlog

Новый конструктор Blob-объектов в Internet Explorer 10
Создание файлов с помощью средства BlobBuilder
HTML5, готовый для применения и экспериментальный
Запись, посвященная работе с двоичными данными при использовании типизированных массивов

Спецификация

Файловый API

Связанные разделы

Скачивайте с помощью файлового API

 

 

Показ:
© 2015 Microsoft