From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/file/filename/index.html | 32 ++ files/ru/web/api/file/getasdataurl/index.html | 64 +++ files/ru/web/api/file/index.html | 87 ++++ files/ru/web/api/file/name/index.html | 118 +++++ .../using_files_from_web_applications/index.html | 476 +++++++++++++++++++++ 5 files changed, 777 insertions(+) create mode 100644 files/ru/web/api/file/filename/index.html create mode 100644 files/ru/web/api/file/getasdataurl/index.html create mode 100644 files/ru/web/api/file/index.html create mode 100644 files/ru/web/api/file/name/index.html create mode 100644 files/ru/web/api/file/using_files_from_web_applications/index.html (limited to 'files/ru/web/api/file') diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/web/api/file/filename/index.html new file mode 100644 index 0000000000..912bfe49ca --- /dev/null +++ b/files/ru/web/api/file/filename/index.html @@ -0,0 +1,32 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Возвращает имя файла. В целях безопасности путь исключен из этого свойства.

+ +
Это свойство исключено. Используйте вместо него  {{domxref("File.name")}}.
+ +

Синтаксис

+ +
var name = instanceOfFile.fileName
+ +

Значение

+ +

Строка

+ +

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

+ +

Не является частью документации.

+ +

Смотреть еще

+ + diff --git a/files/ru/web/api/file/getasdataurl/index.html b/files/ru/web/api/file/getasdataurl/index.html new file mode 100644 index 0000000000..881c5815b8 --- /dev/null +++ b/files/ru/web/api/file/getasdataurl/index.html @@ -0,0 +1,64 @@ +--- +title: File.getAsDataURL() +slug: Web/API/File/getAsDataURL +tags: + - API + - File API + - Files + - Method +translation_of: Web/API/File/getAsDataURL +--- +
{{APIRef("File API") }}
+ +

{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Описание

+ +

Метод getAsDataURL возвращает содержимое файла закодированное в формате data: URL

+ +
+

Примечание: Этот метод является устаревшим; предпочтительнее использовать {{domxref ("FileReader")}} Метод {{domxref ("FileReader.readAsDataURL", "readAsDataURL ()")}} вместо этого.

+
+ +

Синтаксис

+ +
var url = instanceOfFile.getAsDataURL();
+ +

Возвращает

+ +

Строку в формате data: URL

+ +

Пример

+ +
// fileInput is a HTMLInputElement: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// array with acceptable file types
+var accept = ["image/png"];
+
+// img is a HTMLImgElement: <img id="myimg">
+var img = document.getElementById("myimg");
+
+// if we accept the first selected file type
+if (accept.indexOf(files[0].mediaType) > -1) {
+  // display the image
+  // same as <img src="data:image/png,<imagedata>">
+  img.src = files[0].getAsDataURL();
+}
+
+ +

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

+ +

Не является частью какой-либо спецификации

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/file/index.html b/files/ru/web/api/file/index.html new file mode 100644 index 0000000000..82c9f5b7aa --- /dev/null +++ b/files/ru/web/api/file/index.html @@ -0,0 +1,87 @@ +--- +title: File +slug: Web/API/File +translation_of: Web/API/File +--- +
{{APIRef}}
+ +
 
+ +

Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.

+ +

Объекты File  как правило извлекаются из объекта {{domxref("FileList")}}, который возвращён как результат пользовательского выбора файлов с помощью {{HTMLElement("input")}} элемента, из drag and drop операций {{domxref("DataTransfer")}} объекта, или из mozGetAsFile() API на {{domxref("HTMLCanvasElement")}}. В Gecko, привилегированный код может создать файл представляющий любой локалный файл без пользовательского взаимодействия (см {{anch("Gecko notes")}} для получения большей информации.)

+ +

Объект File - особый вид {{domxref("Blob")}}, и может быть использован в любом контексте так же, как и Blob. В частности, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, и {{domxref("XMLHttpRequest", "", "send()")}} допускают и Blob, и File.

+ +

Смотри Использование файлов в веб приложениях для получения более подробной информации и примеров.

+ +

Свойства

+ +

Интерфейс File также наследует свойства от {{domxref("Blob")}} интерфейса:

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00  в часовом поясе UTC).
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
Возвращает дату последнего изменения файла, на который ссылается объект File.
+
{{domxref("File.name")}} {{readonlyinline}}
+
Возвращает имя файла, на который ссылается объект File.
+
{{domxref("File.size")}} {{readonlyinline}}
+
Возвращает размер файла.
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
Возвращает URL адрес, где расположен {{domxref("File")}}.
+
{{domxref("File.type")}} {{readonlyinline}}
+
Возвращает MIME тип файла.
+
+ +

Методы

+ +

Интерфейс не определяет никаких методов, но наследует методы из интерфейса {{domxref("Blob")}}:

+ +

{{Page("/en-US/docs/Web/API/Blob", "Methods")}}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Исходное определение
+ +

Браузерная совместимость

+ +
{{Compat("api.File")}}
+ +

 

+ +

Реализационные заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/file/name/index.html b/files/ru/web/api/file/name/index.html new file mode 100644 index 0000000000..5dfb9aefee --- /dev/null +++ b/files/ru/web/api/file/name/index.html @@ -0,0 +1,118 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - API + - File API + - Files + - Property + - Reference +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Возвращает имя файла представленного объектом типа {{domxref("File")}}. По соображениям безопасности не содержит пути к файлу.

+ +

Синтаксис

+ +
var name = file.name;
+ +

Значение

+ +

Строка, содержащая имя файла без пути, например, "My Resume.rtf".

+ +

Пример

+ +
<input type="file" multiple onchange="processSelectedFiles(this)">
+
+ +
function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}
+ +

Проверьте результаты ниже:

+ +

{{ EmbedLiveSample('Example', 300, 50) }}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.name13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}10.016.0{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.name{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] {{webkitbug("32912")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..84af0e83a7 --- /dev/null +++ b/files/ru/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,476 @@ +--- +title: Использование файлов в веб приложениях +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +

Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента {{ HTMLElement("input") }} или drag and drop.
+
+ Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.

+ +

Доступ к выбранным файлам

+ +

Рассмотрим следующий код:

+ +
<input type="file" id="input" multiple>
+ +

File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.

+ +

Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.

+ +

Обращение к одному выбранному файлу с использованием классической DOM-модели:

+ +
const selectedFile = document.getElementById('input').files[0];
+ +

Обращение к одному выбранному файлу через jQuery:

+ +
var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];
+ +
+

Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"

+
+ +

Доступ к выбранным файлам через событие change

+ +

Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие change. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события change, как показано здесь:

+ +
const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}
+ +

Обработчик события change можно назначить атрибутом элемента:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом {{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.

+ +

Получение информации о выделенных файлах

+ +

Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение аттрибута длины (length) списка файлов:

+ +
var numFiles = files.length;
+ +

Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

Этот цикл проходит по всем файлам в списке файлов.

+ +

Всего существует три аттрибута, предоставляемых объектом {{ domxref("File") }}, которые содержат полезную информацию о файле.

+ +
+
name
+
Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути.
+
size
+
Размер файла в байтах, как 64-битное целое число (возможно только чтение).
+
type
+
MIME тип файла, как строка доступная только для чтения, или пустая строка ("") если тип файла не может быть определён.
+
+ +

Пример: Отображение размера файла(ов)

+ +

Следующий пример показывает возможное использование свойства size:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Использование метода click() скрытых элементов выбора файла

+ +

Начиная с Gecko 2.0 {{ geckoRelease("2.0") }}, вы можете скрыть непривлекательный элемент {{ HTMLElement("input") }} и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input  значение none (display:none) и вызывая метод {{ domxref("element.click","click()") }} скрытого элемента {{ HTMLElement("input") }}.

+ +

Рассмотрим следующую разметку HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+ +

Код, обрабатывающий событие click, может выглядеть следующим образом:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // предотвращает перемещение к "#"
+}, false);
+
+ +

Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.

+ +

Использование элемента label скрытого элемента input

+ +

Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом {{ HTMLElement("label") }}.

+ +

Рассмотрим следующую разметку HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<label for="fileElem">Select some files</label>
+ +

В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click(). Также в данном случае вы можете стилизовать элемент label так, как пожелаете.

+ +

Выбор файлов с использованием технологии drag and drop

+ +

Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.

+ +

На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приемку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter, dragover и drop.

+ +

В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

Вся настоящая магия происходит в функции drop():

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Здесь мы извлекаем из события поле dataTransfer, затем вытаскиваем из него список файлов и передаем этот список в handleFiles(). После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.

+ +

Пример: Отображение эскизов изображений, выбранных пользователем

+ +

Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Предполагается, что "preview" это div, в котором будет отображаться содержимое.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "image.*"). Для каждого файла, который является изображением, мы создаем новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.

+ +

Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав {{ domxref("File") }} ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем {{ domxref("Node.appendChild()") }} для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.

+ +

Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader, мы настраиваем его функцию onload, затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передается в обратный вызов onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.

+ +

Использование URLs объктов

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} представляет поддержку для методов DOM {{ domxref("window.URL.createObjectURL()") }} и {{ domxref("window.URL.revokeObjectURL()") }}. Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM {{ domxref("File") }}, включая локальные файлы на компьютере пользователя.

+ +

Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

URL объекта – это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создается новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобожден. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Пример: Использование URL объектов для отображения изображений

+ +

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

+ +

HTML, который представляет интерфейс, выглядит так:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

Здесь определяется элемент файла {{ HTMLElement("input") }}, а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе {{ anch("Использование метода click() скрытых элементов выбора файла") }}, как о методе вызова окна выбора файла.

+ +

Метод handleFiles() может быть реализован таким образом:

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Он начинается с получения элемента {{ HTMLElement("div") }} с ID fileList. Это блок, в который мы вставим наш список файлов, включая эскизы..

+ +

Если объект {{ domxref("FileList") }}, передаваемый в handleFiles() является null, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:

+ +
    +
  1. Создается новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).
    2. +
  2. Этот новый элемент вставляется в блок {{ HTMLElement("div") }} с помощью вызова его метода {{ domxref("element.appendChild()") }}.
    3. +
  3. Для каждого {{ domxref("File") }} в {{ domxref("FileList") }}, представляемого files: +
      +
    1. Создаем новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.
      2. +
    2. Создаем новый элемент изображения ({{ HTMLElement("img") }}).
      3. +
    3. Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя {{ domxref("window.URL.createObjectURL()") }} для создания URL на двоичный объект.
      4. +
    4. Устанавливаем высоту изображения в 60 пикселей.
      5. +
    5. Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода {{ domxref("window.URL.revokeObjectURL()") }}, передавая в него строку URL объекта, которая указана в img.src.
      6. +
    6. Добавляем новый элемент в список.
      7. +
    +
    4. +
+ +

Пример: Загрузка файла, выбранного пользователем

+ +

Еще одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.

+ +

Создание заданий на загрузку

+ +

Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj, с соответствующим {{ domxref("File") }}, прикрепленным в атрибут file. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Строка 2 получает {{ domxref("NodeList") }} в переменную imgs со всеми элементами документа, имеющих класс CSS obj. В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload. Каждый из них отвечает за загрузку соответствующего файла.

+ +

Управление процессом загрузки файла

+ +

Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.

+ +
function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+ +

Функция FileUpload(), показанная выше, создает объект Throbber, который используется для отображения хода загрузки, а затем создает {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.

+ +

Перед началом загрузки данных выполняются несколько шагов для подготовки:

+ +
    +
  1. На XMLHttpRequest устанавливается обработчик события progress для обновления индикатора хода загрузки новыми значениями процента выполнения, так что по мере хода загрузки, индикатор будет обновляться, отображая последнюю информацию.
    2. +
  2. На XMLHttpRequest's устанавливается обработчик события load для установки индикатора загрузки в значение 100%, чтобы убедиться, что индикатор действительно установлен в 100% (в случае проблем детализации в ходе процесса). Затем обработчик удаляет индикатор загрузки, т.к. он более не нужен. Поэтому индикатор исчезает как только загрузка завершена.
    3. +
  3. Запрос на загрузку файла изображения открывается вызовом метода XMLHttpRequest's open() для начала создания POST-запроса.
    4. +
  4. Тип MIME для загрузки устанавливается вызовом функции XMLHttpRequest overrideMimeType(). В этом случае мы используем общий тип MIME type; вам может быть нужно или не нужно вообще устанавливать тип MIME в зависимости от вашего случая.
    5. +
  5. Объект FileReader используется для преобразования файла в двоичную строку.
    6. +
  6. И в завершение, когда содержимое загружено, вызывается функция XMLHttpRequest send() для отправки содержимого файла.
    7. +
+ +

Асинхронная обработка процесса загрузки

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Пример: Использование URL объектов для отображения PDF

+ +

URL объектов могут быть использованы не только для изображений! Также этот прием можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.

+ +

В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

А здесь изменение атрибута src:

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Пример: Использование URL объектов с другими типами файлов

+ +

Вы можете таким же образом работать с файлами в других форматах. Ниже приведен пример как загружается видео:

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

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

+ + + +

Дополнительные ссылки

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

-- cgit v1.2.3-54-g00ecf