Javascript удалить файл из списка файлов для загрузки
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента <input> или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.
Доступ к выбранным файлам
Рассмотрим следующий код:
File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.
Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.
Обращение к одному выбранному файлу с использованием классической DOM-модели:
Обращение к одному выбранному файлу через jQuery:
Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
Доступ к выбранным файлам через событие change
Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:
Обработчик события change можно назначить атрибутом элемента:
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.
Получение информации о выделенных файлах
Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:
Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:
Этот цикл проходит по всем файлам в списке файлов.
Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.
name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.
Пример: Отображение размера файла(ов)
Следующий пример показывает возможное использование свойства size :
Использование метода click() скрытых элементов выбора файла
Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), вы можете скрыть непривлекательный элемент <input> и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input значение none (display:none) и вызывая метод click() скрытого элемента <input> .
Рассмотрим следующую разметку HTML:
Код, обрабатывающий событие click, может выглядеть следующим образом:
Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.
Использование элемента label скрытого элемента input
Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом <label> .
Рассмотрим следующую разметку HTML:
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.
Выбор файлов с использованием технологии drag and drop
Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:
В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:
Вся настоящая магия происходит в функции drop() :
Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.
Пример: Отображение эскизов изображений, выбранных пользователем
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.
Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.
Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.
Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.
Использование URLs объектов
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) представляет поддержку для методов DOM window.URL.createObjectURL() (en-US) и window.URL.revokeObjectURL() (en-US) . Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM File , включая локальные файлы на компьютере пользователя.
Когда у вас есть объект File , на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:
URL объекта – это строка, идентифицирующая объект файла File . Каждый раз при вызове window.URL.createObjectURL() (en-US) , создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом window.URL.revokeObjectURL() (en-US) :
Пример: Использование URL объектов для отображения изображений
Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.
HTML, который представляет интерфейс, выглядит так:
Здесь определяется элемент файла <input> , а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе Использование метода click() скрытых элементов выбора файла, как о методе вызова окна выбора файла.
Метод handleFiles() может быть реализован таким образом:
Он начинается с получения элемента <div> с ID fileList . Это блок, в который мы вставим наш список файлов, включая эскизы..
Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:
- Создаётся новый элемент - неупорядоченный список ( <ul> ).
- Этот новый элемент вставляется в блок <div> с помощью вызова его метода element.appendChild() .
- Для каждого File в FileList , представляемого files :
- Создаём новый элемент пункта списка ( <li> ) и вставляем его в список.
- Создаём новый элемент изображения ( <img> ).
- Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
- Устанавливаем высоту изображения в 60 пикселей.
- Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US) , передавая в него строку URL объекта, которая указана в img.src .
- Добавляем новый элемент в список.
Пример: Загрузка файла, выбранного пользователем
Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.
Создание заданий на загрузку
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:
Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.
Управление процессом загрузки файла
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.
Перед началом загрузки данных выполняются несколько шагов для подготовки:
Асинхронная обработка процесса загрузки
Пример: Использование URL объектов для отображения PDF
URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false .
А здесь изменение атрибута src :
Пример: Использование URL объектов с другими типами файлов
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:
Как удалить один выбранный файл из управления входным файлом?
У меня есть управление входным файлом с возможностью выбора нескольких файлов; однако, я хочу проверить файл, и если у него неправильное расширение, я должен удалить этот файл из самого файла управления файлами, возможно ли это?
Я попробовал как ниже
Ниже приведен снимок экрана, но я не могу его изменить.
![enter image description here]()
Как отмечали другие люди, FileList читается только. Вы можете обойти это, нажав эти файлы в отдельный Array . Затем вы можете делать все, что захотите, с этим кураторским списком файлов. Если вы загружаете их на сервер, вы можете использовать API FileReader .
Ниже приведен пример полного отказа от необходимости изменять FileList . Шаги:
- Добавить обычный прослушиватель событий изменения входного файла
- Прокрутка каждого файла из события изменения, фильтрация для желаемой проверки
- Вставьте действительные файлы в отдельный массив
- Использовать API FileReader для локального чтения файлов.
- Ввести действительные обработанные файлы на сервер
Обработчик событий и основной код цикла файлов:
Обратите внимание на использование API FileReader . Base64, кодирующий файл, увеличит его размер примерно на 30%. Если это неприемлемо, вам нужно попробовать что-то еще.
Я подумал, что здесь также должен добавить свой комментарий здесь (я ответил здесь: JavaScript удалить файл из FileList для загрузки)
Я нашел обходное решение. Это не потребует AJAX для запроса вообще, и форма может быть отправлена на сервер. В принципе, вы можете создать вход hidden или text и установить его атрибут value в строку base64, созданную после обработки выбранного файла.
Вероятно, вы рассмотрите идею создания нескольких входных файлов вместо ввода text или hidden . Это не сработает, поскольку мы не можем присвоить ему значение.
Этот метод будет включать входной файл в данные, отправленные в базу данных, и игнорировать входной файл, который вы могли бы:
- в back-end не учитывается поле;
- вы можете установить атрибут disabled во входной файл перед сериализацией формы;
- удалите элемент DOM перед отправкой данных.
Если вы хотите удалить файл, просто получите индекс элемента и удалите элемент ввода (текст или скрытый) из DOM.
Я создаю веб-приложение с перетаскиванием и выгрузкой, используя HTML5, и я отбрасываю файлы на div и, конечно, извлекаю объект dataTransfer, который дает мне FileList.
Теперь я хочу удалить некоторые из файлов, но я не знаю, как, или если это даже возможно.
Я хотел бы просто удалить их из FileList; Мне им бесполезно. Но если это невозможно, следует ли вместо этого писать в чеках в коде, который взаимодействует с FileList? Это кажется громоздким.
спросил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадЕсли вы хотите удалить только несколько из выбранных файлов, вы не сможете. Файл API рабочего проекта, на который вы ссылаетесь, содержит примечание:
Интерфейс HTMLInputElement [HTML5] имеет readonly FileList атрибут, [. ]
[акцент мой]Читая немного рабочего проекта HTML 5, я наткнулся на Общие input API-интерфейсы элементов. Кажется, вы можете удалить весь список файлов, установив для свойства value объекта input пустую строку, например:
Кстати, статья Использование файлов из веб-приложений также может представлять интерес.
ответил(а) 2020-04-01T15:57:06.781535+03:00 1 год, 7 месяцев назадЭтот вопрос уже отмечен как ответ, но я хотел бы поделиться некоторой информацией, которая может помочь другим пользователям использовать FileList.
Было бы удобно рассматривать FileList как массив, но такие методы, как сортировка, сдвиг, поп и срез, не работают. Как и другие, вы можете скопировать FileList в массив. Однако вместо использования цикла существует простое однострочное решение для обработки этого преобразования.
Протестировано OK в FF, Chrome и IE10 +
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадЕсли вы ориентируетесь на вечнозеленые браузеры (Chrome, Firefox, Edge, но также работает в Safari 9+), или вы можете позволить себе polyfill, вы можете превратить FileList в массив с помощью Array.from() следующим образом:
Затем легко обрабатывать массив File , как и любой другой массив.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадПоскольку мы находимся в сфере HTML5, это мое решение. Суть в том, что вы выталкиваете файлы в массив, а не оставляете их в FileList, а затем используете XHR2, вы нажимаете файлы на объект FormData. Пример ниже.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадЯ нашел очень быстрое и короткое обходное решение для этого. Протестировано во многих популярных браузерах (Chrome, Firefox, Safari);
Во-первых, вам нужно преобразовать FileList в массив
для удаления конкретного элемента используйте этот
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадЯ знаю, что это старый вопрос, но он высоко оценивает поисковые системы в отношении этой проблемы.
свойства объекта FileList не могут быть удалены, но по крайней мере на Firefox они могут быть изменены. Мое обходное решение этой проблемы состояло в том, чтобы добавить свойство IsValid=true к тем файлам, которые прошли проверку, и IsValid=false к тем, которые этого не сделали.
то я просто просматриваю список, чтобы убедиться, что в FormDatastrong > добавлены только свойства с IsValid=true .
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадТеперь HTML и стили для этого. Я довольно новичок, но все это на самом деле сработало для меня и заняло у меня некоторое время, чтобы понять это.
Стили для этого. Я должен был отметить некоторые из них, важные, чтобы отвергнуть поведение Joomla.
Надеюсь, это поможет.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадТам может быть более элегантный способ сделать это, но вот мое решение. С помощью JQuery
В основном вы очищаете значение ввода. Клонировать его и положить клон вместо старого.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадСпасибо @Nicholas Anderson, просто и прямо, вот ваш код, применяемый и работающий над моим кодом с использованием jquery.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадвы можете просто проверить, присутствует ли файл в списке файлов в вашей DOM, и, конечно же, если вы просто не отправляете этот элемент в базу данных.
ответил(а) 2020-04-01T15:37:55+03:00 1 год, 7 месяцев назадВозможно, вы захотите создать массив и использовать его вместо списка файлов только для чтения.
После этого вы можете загружать свой список вместо своего списка. Я не уверен в контексте, в котором вы работаете, но я работаю с плагином jquery, который я нашел, и что мне нужно было сделать, это взять источник плагина и поместить его на страницу с помощью тегов <script> . Затем над источником я добавил свой массив, чтобы он мог действовать как глобальная переменная, и плагин мог бы ссылаться на него.
Тогда это просто вопрос замены ссылок.
Я думаю, это позволит вам снова добавить перетаскивание, если встроенный список доступен только для чтения, а как еще вы могли бы получить отброшенные файлы в список?
Доброго времени суток, друзья. Поговорим сегодня о работе с файлами в Node.js. Для работы с файлами используется модуль fs (сокращение от File System).
В этой статье мы рассмотрим следующие темы:
Для начала работы нам потребуется установленная Node.js. Подробную инструкцию по ее установке вы можете получить (тут).
Прежде чем начать работу с модулем, его следует импортировать в рабочем файле.
Пробежимся по основным методам этого модуля и посмотрим на примерах как с ними можно работать.
Работа с файловыми дескрипторами
Прежде чем двигаться дальше, давайте посмотрим на термины, о которых описано в статье ниже.
Файловый дескриптор — это неотрицательное целое число. Когда создается новый поток ввода-вывода, ядро возвращает процессу, создавшему поток ввода-вывода, его файловый дескриптор (Wikipedia).
Перейдем к примерам.
Ниже я приведу перечень флагов доступа к файлам
Следует помнить, что дескрипторы файлов необходимо закрывать для предотвращения переполнения памяти, а также проблем с производительностью. Выполним данную задачу с помощью метода close() и его синхронного аналога closeSync().
Работа с директориями
Для проверки существующей директории (файла) и доступов к нему в модуле fs применяется метод access
Вторым параметром устанавливается константа режима проверки:
Создание новой папки
Для создания каталогов присутствует асинхронный метод mkdir и синхронный mkdirSync.
Для создания в текущей директории нового каталога, перед путем следует указать переменную __dirname как вариант реализации абсолютного пути, либо воспользоваться метом resolve модуля path.
Чтение содержимого папки
Для получения содержимого директории используются два метода readdir и readdirSync. Первым параметром для методов передается путь директории, содержимое которой нужно получить.
Удаление папки
Удаление директории производится с помощью методов rmdir и rmdirSync. Первым параметром методов является путь удаляемой директории.
Получение системной информации о файле
Каждый файл, который мы загружаем, помимо данных хранит в себе системную информацию. Для получения этой информации можно воспользоваться методом stat() или выбрать синхронный вариант statSync()
Вся информация хранится в получаемом объекте stats. Данный объект хранит в себе методы для получения дополнительной полезной информации.
Перечислю некоторые из этих свойств:
stats.isDirectory() метод позволяет узнать, является ли файл директорией;
stats.isFile() метод возвращает true, если это файл;
stats.isSocket() метод возвращает true, если это сокет;
stats.isSymbolicLink() метод возвращает true, если файл является символьной ссылкой;
stats.size свойство, которое возвращает размер файла;
stats.birthtime возвращает время и дату, когда данный файл был создан.
Модуль path и путь к файлу Node.js
Основной проблемой при работе с файлами и папками в операционных системах является разный синтаксис написания путей их расположения. Для решения этой проблемы в Node.js есть модуль path c набором полезных методов.
Для началы работы с модулем его нужно импортировать.
Получение имени, пути и расширения файла
Предположим, что в папке /temp лежит файл template.txt. Воспользуемся методами модуля path для получения имени файла, пути к нему, а так же его расширения.
Метод basename возвращает наименование файла. Первым параметром передается путь к файлу, вторым параметром (опционально) передается расширение файла, если необходимо получить наименование файла без расширения.
path.basename(file, ‘.txt’) // tempalate
Метод dirname возвращает весь путь директории, где лежит файл и имеет один параметр, в который передается путь к файлу.
Метод extname возвращает расширение переданного файла.
Работа с путями файла
В модуле path есть ряд методов для удобного формирования путей к нужному файлу или директории. Мы не будем рассматривать все методы, а только наиболее часто используемые. Рассмотрим их ниже.
Метод join принимает список параметров, объединяет их в одну строку, используя разделитель, подходящий к конкретной операционной системе, в которой будет исполнятся код.
Метод resolve используется для нахождения абсолютных путей к файлу.
Метод normalize позволяет найти путь к файлу, используя синтаксис переходов (.. и .) по папкам.
Переименование файла или директории
Методы rename() и renameSync() первым параметром принимают путь к файлу, который нужно переименовать. Второй параметр отвечает за новое наименование файла.
Чтение файла
Если вторым параметром не указана кодировка, то возвращается Buffer. Эти методы полностью загружают файлы в память компьютера, что может сильно отразиться на производительности. Если размер файла большой, то стоит воспользоваться потоками fs.createReadStream()
Запись файла
Чтобы перезаписать контент файлов, используются методы writeFile и writeFileSync. Важный момент! Если файла, контент которого нужно перезаписать, не существует, то он будет создан автоматически.
Копирование файла
Методы copyFile() и copyFileSync() первым параметром принимают путь файла для копирования. Второй параметр принимает название пути и нового файла. Третьим параметром является колбэк функция, которая возвращает ошибку.
Удаление файла
Последнее, что мы рассмотрим в этой статье будут методы unlink() и unlinkSync(). Первым параметром методы принимают путь к удаляемому файлу. Второй параметр в методе unlink возвращает колбэк функцию с ошибкой.
Заключение
В данной статье мы разобрали работу Node.js с файлами, на примерах посмотрели основные полезные методы модулей fs и path. Исходный код вы сможете найти тут. Надеюсь данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Читайте также:
