From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../using_files_from_web_applications/index.html | 50 +++++++++++----------- 1 file changed, 25 insertions(+), 25 deletions(-) (limited to 'files/ru/web/api/file') 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 index 4535edc2e2..855bd8817a 100644 --- 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 @@ -11,7 +11,7 @@ translation_of: Web/API/File/Using_files_from_web_applications

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

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

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

@@ -19,11 +19,11 @@ translation_of: Web/API/File/Using_files_from_web_applications

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

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

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

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

 
@@ -35,7 +35,7 @@ var selectedFile = $('#input')[0].files[0];

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

-
const inputElement = document.getElementById("input");
+
const inputElement = document.getElementById("input");
 inputElement.addEventListener("change", handleFiles, false);
 function handleFiles() {
   const fileList = this.files; /* now you can work with the file list */
@@ -43,7 +43,7 @@ function handleFiles() {
 
 
Обработчик события change можно назначить атрибутом элемента:

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

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

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

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

 
-
var numFiles = files.length;

+
var numFiles = files.length;

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

 
-
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
   var file = files[i];
   ..
 }
@@ -78,7 +78,7 @@ function handleFiles() {
 
 
Следующий пример показывает возможное использование свойства size:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
@@ -118,12 +118,12 @@ function updateSize() {
 
 
Рассмотрим следующую разметку HTML:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<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"),
+
var fileSelect = document.getElementById("fileSelect"),
   fileElem = document.getElementById("fileElem");
 
 fileSelect.addEventListener("click", function (e) {
@@ -142,7 +142,7 @@ fileSelect.addEventListener("click", function (e) {
 
 
Рассмотрим следующую разметку HTML:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<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 так, как пожелаете.

@@ -153,7 +153,7 @@ fileSelect.addEventListener("click", function (e) {
 
 
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:

 
-
var dropbox;
+
var dropbox;
 
 dropbox = document.getElementById("dropbox");
 dropbox.addEventListener("dragenter", dragenter, false);
@@ -165,7 +165,7 @@ dropbox.addEventListener("drop", drop, false);
 
 
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

 
-
function dragenter(e) {
+
function dragenter(e) {
   e.stopPropagation();
   e.preventDefault();
 }
@@ -178,7 +178,7 @@ function dragover(e) {
 
 
Вся настоящая магия происходит в функции drop():

 
-
function drop(e) {
+
function drop(e) {
   e.stopPropagation();
   e.preventDefault();
 
@@ -195,7 +195,7 @@ function dragover(e) {
 
 
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.

 
-
function handleFiles(files) {
+
function handleFiles(files) {
   for (var i = 0; i < files.length; i++) {
     var file = files[i];
 
@@ -225,11 +225,11 @@ function dragover(e) {
 
 
Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

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

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

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

 
-
window.URL.revokeObjectURL(objectURL);

+
window.URL.revokeObjectURL(objectURL);

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

 
@@ -237,7 +237,7 @@ function dragover(e) {
 
 
HTML, который представляет интерфейс, выглядит так:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<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>
@@ -248,7 +248,7 @@ function dragover(e) {
 
 
Метод handleFiles() может быть реализован таким образом:

 
-
window.URL = window.URL || window.webkitURL;
+
window.URL = window.URL || window.webkitURL;
 
 var fileSelect = document.getElementById("fileSelect"),
     fileElem = document.getElementById("fileElem"),
@@ -312,7 +312,7 @@ function handleFiles(files) {
 
 
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj, с соответствующим {{ domxref("File") }}, прикреплённым в атрибут file. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:

 
-
function sendFiles() {
+
function sendFiles() {
   var imgs = document.querySelectorAll(".obj");
 
   for (var i = 0; i < imgs.length; i++) {
@@ -327,7 +327,7 @@ function handleFiles(files) {
 
 
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.

 
-
function FileUpload(img, file) {
+
function FileUpload(img, file) {
   const reader = new FileReader();
   this.ctrl = createThrobber(img);
   const xhr = new XMLHttpRequest();
@@ -369,7 +369,7 @@ function handleFiles(files) {
 
 
Асинхронная обработка процесса загрузки

 
-
<?php
+
<?php
 if (isset($_FILES['myFile'])) {
     // Example:
     move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
@@ -431,12 +431,12 @@ if (isset($_FILES['myFile'])) {
 
 
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false {{non-standard_inline()}}.

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

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

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

@@ -445,7 +445,7 @@ window.URL.revokeObjectURL(obj_url);

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

 
-
var video = document.getElementById('video');
+
var video = document.getElementById('video');
 var obj_url = window.URL.createObjectURL(blob);
 video.src = obj_url;
 video.play()
-- 
cgit v1.2.3-54-g00ecf