Jquery добавить файл в input file
The File Upload widget is initialized by calling the fileupload method on a jQuery collection with the target HTML element:
The target element is usually a container element holding the file upload form, or the file upload form itself, but it can also be just the file input element itself for a customized UI and if an url is provided as options parameter.
The initialization method's first argument is an object that allows you to initialize the widget with various Options:
It is possible to pass options to the initialization method as HTML5 data attributes:
It is possible to change Options after initializing the widget:
If no value is specified, the option method acts as a getter:
Multiple Options can be set at once by providing an object as second parameter:
To remove the file upload widget functionality from the element node, call the destroy method:
This will also remove any added event listeners.
As other widgets based on jQuery UI Widget, the File Upload widget can be disabled/enabled:
Retrieving overall progress data:
Retrieving the number of active uploads:
Programmatic file upload
Usually, file uploads are invoked by selecting files via file input button or by dropping files on the drop zone.
However it is also possible to upload files programmatically for browsers with support for XHR file uploads (see Browser support):
The second argument must be an object with an array (or array-like list) of File or Blob objects as files property.
To retrieve a files list on modern browsers, you can access the files property of the file input field, e.g.:
Other properties allow you to override options for the file upload, e.g. the upload url:
The add method uploads files by adding them to the upload queue, the same way that files are added via the file input button or drag&drop.
Files can also be sent directly using the send method:
The send method returns a jqXHR object, that allows to bind callbacks to the ajax file upload request(s):
Note: The send API method sends the given files directly, without splitting them up into multiple requests. So if your files argument is made up of 3 files, it will still only send one request. If the multipart option is true, it will still send all 3 files as part of one multipart request, else it will only send the first file.
So if you need to send files with multiple requests, either call the send API method multiple times, or use the add API method instead.
Programmatic file uploads for browsers without support for XHR file uploads
It is also possible to use the add and send API methods for browsers without support for XHR file uploads, by making use of the fileInput option:
The fileInput property must be a jQuery collection with an input of type file with a valid files selection.
Non-XHR file uploads make use of the Iframe Transport.
The File Upload widget provides several callback hooks.
One way of using them is to provide callback methods as part of the Options object:
The second way of using them is by binding event listeners to the widget element:
Each event name has "fileupload" as prefix.
Note: Adding additional event listeners via bind method is the preferred option to preserve callback settings by the jQuery File Upload UI version.
One special callback is the add callback, as it provides a submit method for the data argument, that will start the file upload:
The submit method of the data argument given to the add callback returns a jqXHR object, that allows to bind callbacks to the ajax file upload request:
How to cancel an upload
Uploads can be canceled by invoking the abort method on a jqXHR object:
How to provide alternative file names:
The name property of File objects is read only, but an alternative name can be provided as uploadName property for each individual file:
По ходу написания проекта наткнулся на проблему, долго откладывал решение вопроса, но мелкие набеги на проблему не помогли, а на масштабные исследования времени нет, тапками не кидайте если что очевидное пропустил, лучше носом ткните. К проблеме: Есть инпут типа файл мультипле, к нему прикручено превью, которое использует FileReader()->readAsDataURL();.
Собственно, есть задача - при загрузке с компа у нас в превью появляется картинка, все ок. Еще раз загружаем с компа картинку - рисуем превью, и тут у меня затык: как засунуть ее в массив отправляемый при субмите на сервер. Вроде список содержится в fileList, но это вроде только те файлы что пришли с последним запросом с компа? Буду рад любой помощи, если есть наводящие вопросы - задавайте.
UPD: Подойдет обоснованное "НИКАК", если нет возможности то и хрен с ним, буду грохать превьюхи или заморачиваться с аяксовой загрузкой и удалением лишних при необходимости, но это крайний вариант ((.
Простой 9 комментариев
Сергей, в том и вопрос что обычная, аяксом то понятно, цикл, отправка. Как добавить в "хранилище" локальное вопрос.
ThunderCat, ну тут сходу вариант только один — скрыть уже наполненный инпут и сгенерить еще один, пустой. Новые файлы будут в него загружаться, и т.д.
Что еще придумать - хз, файллист ридонли, с ним ничего не сделаешь.
Сергей, да, думал в том же направлении, если других вариантов нет попробую сначала так,а потом уже аяксом, ибо мусорить на сервере не очень хочется. Тут правда будет еще гемор с удалением файла из файллиста если загрузил не то.
Сергей, яп проще, более того, уже есть почти все, только удалялка с сервера нужна, но это косое решение, если клиент загрузил на сервер несколько файлов и не засубмитил форму, тупо закрыл страничку или по ссылке ушел, на сервере будет мусор, который потом как то чистить надо. Не комильфо.
ThunderCat, Вы про превьюшки? Они же у вас вроде файлридером генерятся, без отправки файла.
Говоря про аякс я имел ввиду следующее:
Создаем временный список
let files = [];
по onchange файл-инпута сравниваем input.fileList со своим списком. Новые файлы добавляем в свой список, попутно генерим превью. Для отмены загрузки файла удаляем его из своего списка.
Когда пользак определится и нажмет сабмит — мы загрузим файлики из своего files в объект FormData и отправим его на сервер.
Итого - интерфейс не тормозит, на сервак ничего лишнего не грузится, IE9 идёт лесом )
Сергей, хм, то есть аяксом мы отправляем прям по субмиту, типа превентдефаулт, сенд аяксом файлы, потом форм субмит. не совсем то что нужно, но на безрыбъе. Тут правда прийдется как-то хитро потом привязывать файлы к объекту которого еще нет на момент загрузки. Ок, что делать, пойду извращаться. Спасибо.
Stalker_RED, да, как вариант, то есть создаем отдельно инпуты каждый раз при клике. только картинки удалять по одной, ну тут уже я сам буду извращаться, вроде из файллиста удалить их можно, только записать нельзя?
Спасибо.
Итак, вариант решения который в итоге подошел по таким параметрам:
1) Файлы можно загружать в несколько этапов, то есть добавил, удалил, еще добавил и тд.
2) Превью файлов хранится в браузере, никакой загрузки до субмита основной формы на сервер не происходит, дабы предотвратить мертвые загрузки - когда люди закрывают форму недозаполнив, но подгрузив файлы.
3) Файлы грузятся на сервер по субмиту формы с кучей полей и линкуются с объектом.
Реализация:
1) так как все писать руками было лень было дернуто с гитхаба половинчатое решение, и "после сборки обработано напильником" (кому интересно - пишите - положу куда-то или форкну ветку). Что умеет сие творение "из коробки": подгружать файлики картинок и делать превью с кнопкой удаления. Все файлы пишутся в отдельный массив, который в конце по нажатию кнопки(опционально сразу при подгрузке с винта) аяксом отправляет на сервер файлы, генерировать кастомный евент по завершении загрузки. Что-то еще, но прочие фишки не понадобились.
2) В результате обточки было добавлено несколько свойств - максимальное количество файлов, максимальный размер файла, максимальный размер всего набора и токен. Теперь оно умеет ругаться на превышения лимитов и отправлять не только файлы, добавленные в массив, но и ключ-токен.
3) На основную форму был повешен листенер онсубмит, который проверял переменную filesSended, по умолчанию установленную в false, и при фалс делал превентдефаулт форме, аяксом слал файлы и токен на серв, по завершении загрузки срабатывал листенер на евент загрузки, который выставлял filesSended в тру, и снова субмитил основную форму, уже без превентдефаулт. Все выглядит как простая отправка формы с перезагрузкой.
4) На сервере файлы принимаются, в базу пишем пути и токен, после чего срабатывает обработчик формы и на сервер приходят остальные данные и дубль токена из хидден инпута. Из них строится объект, айдишник и токен передается в объект картинки, методу ->relinkImages($id,$token); Метод тащит все картинки с заданным токеном, меняет поле связи на нужный айди, обнуляет токен и сохраняет запись. Все!
5) В качестве паранойи в сессию пишутся все токены выданные пользователю и при загрузке картинок и данных наличие пришедшего постом токена проверяется в сессии.
Отдельное спасибо Stalker_RED и Сергей delphinpro за умные мысли, советы и отличное знание темы, сам в жс "плаваю".
сори что поздно, форк аплоадера, если кому надо, пилить придется под себя.
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.
Использование метода click() скрытых элементов выбора файла
Рассмотрим следующую разметку HTML:
Код, обрабатывающий событие click, может выглядеть следующим образом:
Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.
Использование элемента label скрытого элемента input
Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом .
Рассмотрим следующую разметку HTML:
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.
Browser compatibility
BCD tables only load in the browser
Our communities
Разметка
В разметке нет ничего особенного. Она обычная, просто тег form, хотя присутствуют также блоки с потенциальными состояниями.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Пока блоки состояний нам не нужны, они прячутся:
По состояниям: .box__uploading отображается во время загрузки файла через Ajax (все остальные блоки состояний скрыты). Затем в зависимости от результата загрузки отображаются .box__success или .box__error.
input[type="file"] и label – функциональные элементы формы. В статье настройка input’ов типа file я описывал, как можно их стилизовать. Также в той статье я рассказывал, зачем нужен атрибут [data-multiple-caption]. Input и label служат альтернативой обычному способу выбора файлов (или единственный способ, если drag and drop не поддерживается).
.box__dragndrop отображается, если браузер поддерживает drag and drop.
Управление процессом загрузки файла
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.
Перед началом загрузки данных выполняются несколько шагов для подготовки:
Асинхронная обработка процесса загрузки
Использование 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):
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение '' в этой спецификации. | Живой стандарт | Initial definition |
HTML 5.1 Определение '' в этой спецификации. | Рекомендация | Initial definition |
Пример: Использование URL объектов для отображения PDF
URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false Non-Standard .
А здесь изменение атрибута src :
Обнаружение свойств
Мы не можем 100% полагаться на поддержку в браузере drag and drop. Необходимо обеспечить фолбек, в этом нам поможет метод обнаружения поддерживаемых свойств. В основе метода drag and drop лежат множество различных JavaScript API, необходимо проверить их все.
Сначала само событие drag & drop. Работу по обнаружению поддерживаемых свойств можно с уверенностью доверить библиотеке Modernizr. Ниже тест события:
Support
Доступ к выбранным файлам через событие change
Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:
Обработчик события change можно назначить атрибутом элемента:
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.
Доступ к выбранным файлам
Рассмотрим следующий код:
File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.
Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.
Обращение к одному выбранному файлу с использованием классической DOM-модели:
Обращение к одному выбранному файлу через jQuery:
Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
Пример: Использование URL объектов для отображения изображений
Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.
HTML, который представляет интерфейс, выглядит так:
Метод handleFiles() может быть реализован таким образом:
Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:
- Создаётся новый элемент - неупорядоченный список ( ).
- Этот новый элемент вставляется в блок с помощью вызова его метода element.appendChild() .
- Для каждого File в FileList , представляемого files :
- Создаём новый элемент пункта списка ( ) и вставляем его в список.
- Создаём новый элемент изображения ( ).
- Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
- Устанавливаем высоту изображения в 60 пикселей.
- Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US), передавая в него строку URL объекта, которая указана в img.src .
- Добавляем новый элемент в список.
Examples
In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the HTMLInputElement.files property, as well as showing off a few clever tricks.
Note: You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won't explain the CSS; the JavaScript is the main focus.
First of all, let's look at the HTML:
This is similar to what we've seen before — nothing special to comment on.
Next, let's walk through the JavaScript.
Note: opacity is used to hide the file input instead of visibility: hidden or display: none , because assistive technology interprets the latter two styles to mean the file input isn't interactive.
Next, we add an event listener to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom updateImageDisplay() function.
Whenever the updateImageDisplay() function is invoked, we:
The custom validFileType() function takes a File object as a parameter, then loops through the list of allowed file types, checking if any matches the file's type property. If a match is found, the function returns true . If no match is found, it returns false .
The returnFileSize() function takes a number (of bytes, taken from the current file's size property), and turns it into a nicely formatted size in bytes/KB/MB.
The example looks like this; have a play:
Developers
От автора: данная статья написана нашим гостем Osvaldas Valutis. Osvaldas расскажет нам не только про drag and drop загрузку файлов на сервер, но и затронет тему UI и UX, поддержки браузеров, а также покажет, как реализовать данную загрузку с помощью метода прогрессивного улучшения.
Сейчас я работаю над RSS ридером Readerrr. И передо мной стояла задача разнообразить обычный способ добавления файлов через input, я хотел реализовать drag and drop модель. Иногда такой способ намного удобнее, разве не так?
Пример: Загрузка файла, выбранного пользователем
Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.
Found a problem with this page?
Last modified: 29 окт. 2021 г. , by MDN contributors
Your blueprint for a better internet.
See also
-
— contains a number of other useful examples related to and the File API.
A basic example
This produces the following output:
Note: You can find this example on GitHub too — see the source code, and also see it running live.
Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control , and then clicking). If you only want the user to choose a single file per , omit the multiple attribute.
When the form is submitted, each selected file's name will be added to URL parameters in the following fashion: ?file=file1.txt&file=file2.txt
Создание заданий на загрузку
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:
Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.
Using file inputs
Getting information on selected files
The selected files' are returned by the element's files property, which is a FileList object containing a list of File objects. The FileList behaves like an array, so you can check its length property to get the number of selected files.
Each File object contains the following information:
name The file's name. lastModified A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight). lastModifiedDate Deprecated A Date object representing the date and time at which the file was last modified. This is deprecated and should not be used. Use lastModified instead. size The size of the file in bytes. type The file's MIME type. webkitRelativePath Non-Standard A string specifying the file's path relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). This is non-standard and should be used with caution.
Note: You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see баг 1384030).
Пример: Отображение эскизов изображений, выбранных пользователем
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.
Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.
Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.
Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.
Пример: Отображение размера файла(ов)
Следующий пример показывает возможное использование свойства size :
Пример: Использование URL объектов с другими типами файлов
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:
Атрибут value элемента input содержит DOMString , который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, value представляет первый файл из списка. Остальные файлы можно определить используя HTMLInputElement.files свойство элемента input.
- Если выбрано несколько файлов, строка представляет собой первый выбранный файл. JavaScript предоставляет доступ к остальным файлам через свойство FileList .
- Если не выбрано ни одного файла, .строка равна "" (пустая).
- Строка начинается с C:\fakepath\ , для предотвращения определения файловой структуры пользователя вредоносным ПО.
Получение информации о выделенных файлах
Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:
Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:
Этот цикл проходит по всем файлам в списке файлов.
Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.
name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.
Выбор файлов с использованием технологии drag and drop
Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:
В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:
Вся настоящая магия происходит в функции drop() :
Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.
Additional attributes
In addition to the common attributes shared by all elements, inputs of type file also support:
files A FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.
Limiting accepted file types
Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.
Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:
- accept="image/png" or accept=".jpg" — Accepts PNG files.
- accept="image/png, image/jpeg" or accept=".jpg, .jpg, .jpg" — Accept PNG or JPEG files.
- accept="image/*" — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
- accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document.
Let's look like a more complete example:
This produces a similar-looking output to the previous example:
Note: You can find this example on GitHub too — see the source code, and also see it running live.
It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the accept value (the exact nature differs across browsers and operating systems).
The accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.
Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation.
Читайте также: