Загрузка файлов добавить файл назад вперед
Обновлено: 04.07.2024
По нажатию ссылки можно скачать файл или открыть для просмотра. Файл открывается для просмотра, если браузер поддерживает его формат, и загружается на компьютер, если не поддерживает. Как только файл начинает загружаться, справа от Умной строки появляется значок файла с индикатором загрузки .
Примечание. При загрузке архивов и исполняемых файлов Яндекс.Браузер проверяет наличие вирусов и нежелательного ПО.Остановка и возобновление загрузки
Вызовите контекстное меню для значка загружаемого файла . Вызовите контекстное меню для значка загружаемого файла .Сохранение файла, который открыт для просмотра
В правой части Умной строки нажмите кнопку Сохранить :
Как открыть загруженный файл
Выберите нужный файл. Если в списке последних загрузок его нет, нажмите ссылку Открыть папку . Нажмите → Открывать <формат файла> автоматически .Куда сохраняются загруженные файлы
По умолчанию файлы сохраняются в следующих папках:
| Операционная система | Путь |
|---|---|
| Windows 7, Windows 8, Windows 10 | Users\\ <учетная запись пользователя> \\Загрузки |
| macOS | Users/ <учетная запись пользователя> /Downloads |
| Операционная система | Путь |
|---|---|
| Windows 7, Windows 8, Windows 10 | Users\\ <учетная запись пользователя> \\Загрузки |
| macOS | Users/ <учетная запись пользователя> /Downloads |
История загруженных файлов
Чтобы перейти к списку всех загруженных файлов, нажмите → Загрузки .
Напротив файла нажмите Ещё и выберите пункт меню Убрать из списка .Файл будет удален из списка загрузок, но не с компьютера. Вы найдете его в папке, в которой файл сохранился при загрузке.
В левом нижнем углу страницы нажмите ссылку Скрыть загруженные .В результате список загрузок в браузере будет очищен. Сами файлы с компьютера удалены не будут.
В левом нижнем углу страницы нажмите ссылку Открыть папку .Уведомления
В блоке Загруженные файлы включите опции Показывать уведомления об окончании загрузок и Предупреждать, если файл уже скачан .Горячие клавиши для работы с загрузкой
Ctrl + Shift + Del
Alt + нажать ссылку
Ctrl + Shift + Del
Alt + нажать ссылку
Проблемы с загрузкой
Если загружаемый файл содержит вредоносную программу, Яндекс.Браузер заблокирует его. Подробнее см. раздел Блокировка опасных файлов.
Попробуйте возобновить загрузку:
Нажмите → Загрузки или нажмите клавиши Ctrl + J .Если загрузка не возобновляется, попробуйте скачать файл заново:
Нажмите → Загрузки или нажмите клавиши Ctrl + J .На загрузку может влиять антивирус, установленный на вашем компьютере. Попробуйте временно отключить антивирус и загрузить файлы снова.
Внимание. Вы можете отключить проверку загружаемых файлов, но для этого вам придется полностью отключить в браузере защиту от вредоносных сайтов и программ. Мы настоятельно рекомендуем этого не делать.Если вы все-таки хотите отключить проверку файлов:
В блоке Защита от угроз отключите опцию Проверять безопасность посещаемых сайтов и загружаемых файлов . Откройте → Дополнения и отключите все расширения. Зайдите на сайт Google Диска. В правой части Умной строки нажмите значок . В блоке Трекеры на этой веб-странице нажмите ссылку Сайт не работает? В открывшемся окне нажмите Разрешить сторонние cookie .Уведомление об окончании загрузки появляется, если:
Проверьте, включены ли в браузере уведомления об окончании загрузки:
В блоке Загруженные файлы включите опцию Показывать уведомления об окончании загрузок .Формат загружаемой картинки зависит от сервера. Сервер может генерировать формат WebP, если он определил Яндекс.Браузер как программу, распознающую WebP. В этом случае браузер не может повлиять на выбор формата.
Не везде картинки скачиваются в WebP. Например, изображение с Яндекс.Картинок будет сохранено в формате JPEG.
">,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Загрузка файлов. Справка","canonical":"https://browser.yandex.ru/help/working-with-files/download-files.html","productName":"Яндекс.Браузер","extra_js":[[],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>]],"extra_css":[[],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"documentPath":"/help/working-with-files/download-files.html","isBreadcrumbsEnabled":true,"lang":"ru","params":<>>>>'>
По нажатию ссылки можно скачать файл или открыть для просмотра. Файл открывается для просмотра, если браузер поддерживает его формат, и загружается на компьютер, если не поддерживает. Как только файл начинает загружаться, справа от Умной строки появляется значок файла с индикатором загрузки .
Примечание. При загрузке архивов и исполняемых файлов Яндекс.Браузер проверяет наличие вирусов и нежелательного ПО.Остановка и возобновление загрузки
Ну да, старая добрая проблема загрузки файлов. Основная мысль загрузки файлов на самом деле очень проста. В общих чертах это работает так:
- Тег <form> помечается атрибутом enctype=multipart/form-data , а в форму помещается тег <input type=file> .
- Приложение получает доступ к файлу через словарь files в объекте запроса.
- Воспользуйтесь методом save() для того, чтобы сохранить временный файл в файловой системе для последующего использования.
Введение¶
Начнём с простейшего приложения, которое загружает файл в определённый каталог и отображает его пользователю. Вот начало нашего приложения:
Сначала нужно выполнить серию импортов. Большая часть понятна, werkzeug.secure_filename() рассматривается чуть позже. UPLOAD_FOLDER - это путь, куда будут загружаться файлы, а ALLOWED_EXTENSIONS - это набор допустимых расширений. Теперь вручную добавим в приложение правило для URL. Обычно мы так не делаем, но почему мы делаем это сейчас? Причина в том, что мы хотим заставить веб-сервер (или наш сервер приложения) обслуживать эти файлы и поэтому нам нужно генерировать правила для связывания URL с этими файлами.
Почему мы ограничили список допустимых расширений? Наверное вам совсем не хочется, чтобы пользователи могли загружать что угодно, если сервер напрямую отправляет данные клиенту. В таком случае вам нужно быть уверенными в том, что пользователи не загрузят файлы HTML, которые могут вызвать проблему XSS (см. Cross-Site Scripting ( xss ) - межсайтовый скриптинг). Также убедитесь в том, что запрещены файлы с расширением .php , если сервер их выполняет. Правда, кому нужен PHP на сервере? :)
Следующая функция проверяет, что расширение файла допустимо, загружает файл и перенаправляет пользователя на URL с загруженным файлом:
Что делает функция secure_filename() ? Мы исходим из принципа «никогда не доверяй тому, что ввёл пользователь». Это справедливо и для имени загружаемого файла. Все отправленные из формы данные могут быть поддельными и имя файла может представлять опасность. Сейчас главное запомнить: всегда используйте эту функцию для получения безопасного имени файла, если собираетесь поместить файл прямо в файловую систему.
Информация для профи
Если считать, что ../ - это нормально, то при соединении этого имени с UPLOAD_FOLDER , пользователь может получить возможность изменять на файловой системе сервера те файлы, который он не должен изменять. Нужно немного разбираться в устройстве вашего приложения, но поверьте мне, хакеры настойчивы :)
Посмотрим, как отработает функция:
Осталась последняя вещь: обслуживание загруженных файлов. Начиная с Flask 0.5 для этого можно использовать соответствующую функцию:
Другая возможность - зарегистрировать uploaded_file с помощью правила build_only и воспользоваться SharedDataMiddleware . Такой вариант будет работать и в более старых версиях Flask:
Теперь, если запустить приложение, всё должно работать как положено.
Улучшение загрузки¶
Добавлено в версии 0.6.
Как на самом деле Flask обрабатывает загрузку? Если файл достаточно мал, он сохраняется в памяти веб-сервера. В противном случае он помещается во временное место (туда, куда укажет tempfile.gettempdir() ). Но как указать максимальный размер файла, после которого загрузка файла должна быть прервана? По умолчанию Flask не ограничивает размер файла, но вы можете задать лимит настройкой ключа конфигурации MAX_CONTENT_LENGTH :
Код выше ограничит максимальный размер файла 16 мегабайтами. Если передаваемый файл окажется больше, Flask сгенерирует исключение RequestEntityTooLarge .
Эта функциональность была добавлена во Flask 0.6, но может быть реализована и в более ранних версиях при помощи наследовании от класса request. За более подробной информацией обратитесь к документации Werkzeug об обработке файлов.
Индикаторы процесса загрузки¶
Многие разработчики придумывают считывать файл мелкими частями, сохранять процент загрузки в базу данных и давать возможность JavaScript считывать эти данные из клиента. Короче говоря, клиент спрашивает у сервера каждые 5 секунд, сколько уже было передано. Почувствовали иронию ситуации? Клиент спрашивает у сервера о том, что уже и так знает.
Сейчас существуют способы получше, которые работают быстрее и более надёжны. В последнее время в вебе многое изменилось и теперь можно использовать HTML5, Java, Silverlight или Flash, чтобы сделать загрузку удобнее со стороны клиента. Посмотрите на следующие библиотеки, предназначенные именно для этого:
Простейшее решение¶
Поскольку общая процедура загрузки файлов остаётся неизменной для всех приложений, занимающихся загрузкой файлов, для Flask есть расширение под названием Flask-Uploads, которое реализует полностью самостоятельный механизм загрузки с белым и чёрным списком расширений и т.п.
Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.
На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file] , настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.
Разметка и первичные стили
Начнем с HTML-разметки:
Пожалуй, главным элементом, на который стоит обратить внимание, является
Спецификация HTML не позволяет нам накладывать визуальные свойства непосредственно на input[type=file] , но мы имеем тэг label , нажатие на который вызывает клик по элементу формы, к которому он привязан. К нашей радости, данный тэг никаких ограничений в стилизации не имеет: мы можем делать с ним все, что захотим.
Вырисовывается план действий: стилизуем метку как нам угодно, а сам input[type=file] прячем с глаз долой. Для начала настроим общие стили страницы:
Теперь стилизуем нашу метку:
То, к чему мы стремимся ( input[type=file] убран из разметки):
Безусловно, можно было отцентровать метку, добавить фон и границу, получив полноценную кнопку, но наш приоритет — Drag-and-Drop.
Прячем input
Теперь нам нужно спрятать input[type=file] . Первое, что бросается в голову — свойства display: none и visibility: hidden . Но тут не все так просто. На некоторых старых браузерах клик по метке перестанет производить какой-либо эффект. Но это не все. Как известно, невидимые элементы не могут получать фокус, а кто бы что ни говорил, фокус важен, так как для некоторых людей это единственная возможность взаимодействия с сайтом. Так что этот способ нас не устраивает. Пойдем обходным путем:
Абсолютно спозиционируем наш input[type=file] относительно его родительского блока, уменьшим до 0.1px , сделаем прозрачным и установим его z-index меньше, чем у родителя, чтоб, так сказать, наверняка.
Поздравляю, мы добились того, чего хотели: наше поле выглядит именно так, как на предыдущей картинке.
Настраиваем фокус
Так как наш input[type=file] физически присутствует на страницу, он имеет возможность получать фокус. То есть, если мы будем нажимать на странице клавишу Tab , то в какой-то момент фокус перейдет на input[type=file] . Но проблема в том, что мы этого не увидим: выделяться будет поле, которое мы скрыли. Да, если в этот момент мы нажмем Enter , то диалоговое окно откроется и все будет работать как надо, вот только как мы поймем, что нажимать уже пора?
Наша задача — определенным образом выделить метку в момент, когда фокус расположен на поле загрузки файлов. Но как нам это сделать, если метка получать фокус не может? Знатоки CSS3 сразу же подумают о псевдоклассе :focus , который определяет стили для элементов в фокусе, и селекторах + или
, которые выбирают правых соседей: элементы, расположенные на том же уровне вложенности, идущие после выбранного элемента. Если учесть, что в нашей разметке input[type=file] расположен прямо перед тэгом label , имеет место быть следующая запись:
Но опять же, не все так просто. Для начала давайте обсудим, каким образом нам следует выделить метку. Как известно, все современные и не очень браузеры имеют уникальные свойства по умолчанию для элементов в фокусе. В основном, это свойство outline , которое создает вокруг элемента обводку, отличающуюся от border тем, что не изменяет размер элемента и может быть отодвинута от него. Как правило, люди пользуются только одним браузером, поэтому привыкают именно к его стандартам. Чтобы людям было проще ориентироваться на нашем сайте, мы должны постараться настроить фокус так, чтобы он выглядел максимально естественно для большинства популярных современных браузеров. В теории, с помощью JavaScript можно получить информацию о том, через какой браузер пользователь открыл сайт, и в соответствии с этим настроить стили, но в рамках статьи, предназначенной в первую очередь для новичков, эта тема слишком сложна и громоздка. Постараемся обойтись малой кровью.
В браузерах, основанных на движке WebKet (Google Chrome, Operа, Safari), свойство по умолчанию для элементов в фокусе имеет вид:
Здесь -webkit-focus-ring-color — специфичный только для данного движка цвет фокусной обводки. То есть, эта строчка будет работать исключительно в WebKit-браузерах, а это именно то, что нам нужно. Укажем данное свойство для нашей метки:
Открываем Google Chrome или Opera, смотрим. Все работает как надо:
Посмотрим, как обстоят дела с фокусом в Mozilla Firefox и Microsoft Edge. Для этих браузеров свойство по умолчанию имеет вид:
К сожалению, префикс -moz- со свойством outline работать не будет. Поэтому нам придется выбирать, какое из этих двух свойств мы выберем. Так как количество пользователей Firefox значительно выше, рациональнее отдать предпочтение именно этому браузеру. Это не значит, что мы лишим пользователей Edge и других браузеров возможности видеть, где сейчас фокус, просто он у них будет выглядеть «неродным». Что ж, приходится идти на жертвы.
Добавляем стиль из Mozilla Firefox перед стилем для WebKit: сначала все браузеры применят первое свойство, а затем те, которые могут (Google Chrome, Opera, Safari и др.), применят второе.
И вот тут начинается странное: в Edge все работает нормально, а вот Firefox по каким-то неведомым причинам отказывается применять свойства к метке при фокусе на input[type=file] . Причем само событие focus случается — проверил через JavaScript. Более того, если принудительно установить фокус на поле выбора файла через инструменты разработчика, то свойство применится и наша обводка появится! Видимо, это баг самого браузера, но если у кого-то есть идеи, почему такое происходит — пишите в комментариях.
Ну ничего, нормальные герои всегда идут в обход. Как я сказал ранее, событие focus случается, а значит, регулировать свойства мы можем прямиком из JavaScript. Но для этого нам придется поменять логику нашего селектора:
Опишем класс .focus для нашей метки и будем добавлять его каждый раз, когда input[type=file] получает фокус и убирать, когда теряет.
Теперь все работает как надо. Поздравляю, с фокусом мы разобрались.
Drag-and-Drop
Работа с Drag-and-Drop осуществляется путем отслеживания специальных браузерных событий: drag, dragstart, dragend, dragover, dragenter, dragleave, drop . Подробное описание каждого из них вы с легкостью сможете найти в интернете. Мы будем отслеживать только некоторые из них.
Для начала определим Drag-and-Drop-элемент:
Затем опишем в CSS специальный класс, который будем присваивать dropZone , когда курсор, тянущий файл, будет прямо над ним. Это нужно, чтобы визуально проинформировать пользователя о том, что файл уже можно отпустить.
Теперь перейдем в JS-файл. Для начала, нам необходимо отменить все действия по умолчанию на события Drag-and-Drop. Например, одно из таких событий — открытие кинутого файла браузером. Нам это совершенно не нужно, поэтому пропишем следующие строчки:
В jQuery вызов оператора return false эквивалентен вызову сразу двух функций: e.preventDefault() и e.stopPropagation() .
Начнем описывать свой собственный обработчик событий. Поступим так же, как делали с фокусом, но на этот раз будем отслеживать события dragenter и dragover для добавления класса и событие dragleave для его удаления:
А происходит это мерцание из-за того, что при наведении курсора на дочерний элемент dropZone , будь то картинка или div с полем выбора файлов и меткой, по какой то причине срабатывает событие dragleave . Нам очевидно, что поле мы не покидаем, а вот браузерам, почему-то, нет, и из-за этого они без зазрения совести убирают класс .focus у dropZone .
И вновь нам придется как-то выкручиваться. Если браузер сам не понимает, что поле мы не покидаем, придется ему помочь. А делать мы это будем через дополнительные условия: вычислим координаты мыши относительно dropZone , а затем проверим, вышел ли курсор за пределы блока. Если вышел, значит убираем стиль:
И все, проблема решена! Вот так выглядит наше поле с файлом внутри:
Переходим к обработке самого события drop . Но для начала вспомним, что, помимо Drag-and-Drop, у нас есть input[type=file] , и каждый из этих способов независим по своей сути, но должен выполнять одинаковые действия: загружать файлы. Поэтому я предлагаю создать отдельную универсальную для обоих методов функцию, в которую мы будем передавать файлы, а она уже будет решать, что с ними сделать. Назовем ее sendFiles() , но опишем чуть позже. Для начала обработаем событие drop :
Сначала уберем класс .dragover у dropZone . Затем получим массив, содержащий файлы. Если вы используете jQuery, то путь будет e.originalEvent.dataTransfer.files , если пишите на чистом JS, то e.dataTransfer.files . Ну а затем передаем массив в нашу пока еще нереализованную функцию.
Теперь проработаем способ загрузки через input[type=file] :
Отслеживаем событие change на кнопке выбора файлов, получаем массив через this.files и отправляем его в функцию.
Отправка файлов через AJAX
Последний этап — описание функции обработки файлов — уникален для всех и каждого. Он будет прямым образом зависеть от той цели, которую вы преследуете. Для примера я покажу, как отправлять файлы на сервер через AJAX.
В переменную maxFileSize занесем максимальный размер файла, который будем отправлять на сервер. Функцией FormData() мы создадим новый объект класса FormData , позволяющий формировать наборы пар ключ-значение. Такой объект можно легко отправлять через AJAX. Далее используем jQuery конструкцию .each для массива files , которая применит заданную нами функцию для каждого его элемента. В качестве аргументов в функцию будут передаваться порядковый номер элемента и сам элемент, которые мы будем обрабатывать как index и file соответственно. В самой функции мы проверим файл на соответствие нашим критериям: размер меньше пяти мегабайт, а тип — PNG или JPEG. Если файл проходит проверку, то добавляем его в наш объект FormData путем вызова функции append() . Ключом послужит строка 'photos[]' , квадратные скобки на конце которой обозначат, что это массив, в котором может быть несколько объектов. Самим объектом будет file .
Теперь все готово для отправки файлов через AJAX. Добавим в нашу функцию следующие строчки:
Поздравляю, теперь вы умеете создавать свое собственное поле загрузки файлов! Конечно же, я не позиционирую свой способ как единственно верный и правильный. Своей задачей я ставил показать общий ход решения данной задачи, подходящий в первую очередь для новичков. Если вы считаете, что где-то что-то можно было сделать лучше — пишите в комментариях, обсудим!
Вы пытаетесь загрузить несколько файлов одновременно? Вот как реализовать загрузку нескольких файлов с использованием HTML и PHP.
В этой статье я собираюсь показать, как использовать один HTML-файл для загрузки нескольких файлов. В дополнение к этому я продемонстрирую использование нескольких файловых входов с дополнительными полями ввода.
Реализация загрузки нескольких файлов
Во-первых, вам нужно создать HTML- форму с атрибутом enctype = ‘multiple / form-data’ . Фактически, атрибут enctype указывает, как данные формы должны быть закодированы при отправке их на сервер. Когда вы используете формы, которые имеют элемент управления загрузкой файлов, вам нужно указать enctype как множественные / form-data .
Если вы используете ввод одного файла, вам нужно включить элемент file для выбора нескольких файлов. Чтобы сделать это, вам нужно назвать входной файл в виде массива, например. имя = “файлы []” . Кроме того, элемент «Файл ввода» должен иметь несколько = «несколько» или просто несколько.
Форма HTML будет выглядеть следующим образом:
Когда пользователь отправляет форму после выбора файлов, мы можем обработать форму с помощью простых фрагментов PHP следующим образом:
Проверка типа файла и размера файла
Вы можете ограничить тип файла, проверив расширение загруженного файла с помощью набора разрешенных расширений. Следующий код проверяет правильность файла изображения.
Чтобы проверить размер файла, вы можете использовать $ _FILES [‘image’] [‘size’] следующим образом:
Кроме того, вы также можете переименовать имя файла перед загрузкой. Вот как заменить пробелы в имени файла на подчеркивание и добавить метку времени к имени файла.
Загрузка нескольких файлов с дополнительной информацией
Иногда требуется загрузить несколько файлов с дополнительной информацией, такой как заголовок, описание и т.д. В таких случаях вам необходимо использовать несколько элементов управления вводом файлов.
На приведенном выше снимке экрана каждый входной файл имеет соответствующий заголовок. Вот пример HTML.
Как видите, есть несколько элементов управления вводом текста и файлов. Добавляя ‘[]’ к вашим именам входных элементов, входные элементы будут передаваться как массивы.
Когда вы отправляете вышеуказанную форму, $ _POST [‘title’] будет массивом. Сопоставляя индекс массива $ _POST [‘title’] с $ _FILES [‘fileUpload’] [‘name’], вы можете получить соответствующий заголовок, пару имен файлов. Например, $ _POST [‘title’] [0] – это заголовок файла $ _FILES [‘fileUpload’] [‘name’] [0] и так далее.
Таким образом, вы можете реализовать несколько загрузок файлов с использованием HTML и PHP.
Читайте также: