Input type file onchange

The following works fine:

I’d like to get this result using jQuery, but that doesn’t work:

I am missing something? (Edit: Yes I missed include the *.js file.)

6 Answers 6

To be specific: $(‘input[type=file]#fileUpload1’).change(.

It should work fine, are you wrapping the code in a $(document).ready() call? If not use that or use live i.e.

Here is a jsFiddle of this working against jQuery 1.4.4

This jsfiddle works fine for me.

Note: .delegate() is the fastest event-binding method for jQuery

Last month, I was working on a project that involved file/image uploading and I thought I would share what I have learned to those of you who are looking to do the same in JavaScript.

I created a post on how to Send data and file input through multi-part forms with FormData in HTML if you guys wanted to know and are wondering how it works. It is kind of a prerequisite knowledge for this post, but not absolutely necessary.

To start off, we will create a simple form element in HTML with the enctype to send file/image data. I styled this file upload so that you can click to select a file as long as you click ins >display: none .

For this JavaScript file, we get the input and upload message by its >uploadMsg text will change to the name of the file you have selected. Getting the text from the onChange function like this will give you a “C:\fakepath\” at the beginning of the file name. To remove this, I replaced “C:\fakepath\” with an empty string to display our uploadMsg correctly.

By default, the file input type will display the name of the file, but remember that I have display: none on the input box, so the default input file name will not be displayed.

And that’s how you implement onChange for file inputs! You guys should use this code and play around with it if you would like.

Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления."> или drag and drop.

Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.

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

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

File API делает возможным доступ к элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:"> FileList , который содержит объекты File , которым соответствуют файлы, загруженные пользователем.

Если пользователь выбирает только один файл, ему соответствует первый файл в списке.

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

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

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

Обращение к выбранным файлам через событие change

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

Если вы хотите дать возможность пользователю выбирать несколько файлов, просто добавьте атрибут multiple для input-элемента:

В этом случае, список файлов, передаваемый в handleFiles(), содержит объекты File для каждого выбранного пользователем файла.

Динамическое добавление обработчика события change

Если ваш input-элемент был создан с помощью Javascript библиотеки, например такой, как jQuery, то для добавления обработчика события change необходимо использовать конструкцию element.addEventListener() , как показано в следующем примере:

Обратите внимание, что в данном случае, функция handleFiles() сама является обработчиком события, в отличие от предыдущих примеров, где был вызван обработчик событий, который передавал его параметр.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Using object URLs

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduces support for the DOM window.URL.createObjectURL() and window.URL.revokeObjectURL() methods. These let you create simple URL strings that can be used to reference any data that can be referred to using a DOM File object, including local files on the user’s computer.

When you have a File object you’d like to reference by URL from HTML, you can create an object URL for it like this:

The object URL is a string identifying the File object. Each time you call window.URL.createObjectURL() , a unique object URL is created, even if you’ve created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically, you should release them explicitly by calling window.URL.revokeObjectURL() :

Example: Using object URLs to display images

This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes. You can view the example live.

The HTML that presents the interface looks like this:

This establishes our file используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления."> element, as well as a link that invokes the file picker, since we keep the file input hidden to prevent that less-than-attractive UI from being displayed. This is explained in the section Using hidden file input elements using the click() method, as is the method that invokes the file picker.

The handleFiles() method follows:

If the элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:"> FileList object passed to handleFiles() is null , we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:

Example: Uploading a user-selected file

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

Creating the upload tasks

Continuing with the code that builds the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj , with the corresponding File attached in a file attribute. This lets us very easily select all the images the user has chosen for uploading using Document.querySelectorAll() , like this:

Line 2 fetches a NodeList , called imgs , of all the elements in the document with the CSS class obj . In our case, these will be all the image thumbnails. Once we have that list, it’s trivial to go through the list, creating a new FileUpload instance for each. Each of these handles uploading the corresponding file.

Handling the upload process for a file

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

The FileUpload() function shown above creates a throbber, which is used to display progress information, then creates an XMLHttpRequest to handle uploading the data.

Before actually transferring the data, several preparatory steps are taken:

1. The XMLHttpRequest ‘s upload progress listener is set to update the throbber with new percentage information, so that as the upload progresses, the throbber will be updated based on the latest information.
2. The XMLHttpRequest ‘s upload load event handler is set to update the throbber with 100% as the progress information (to ensure the progress indicator actually reaches 100%, in case of granularity quirks during the process). It then removes the throbber, since it’s no longer needed. This causes the throbber to disappear once the upload is complete.
3. The request to upload the image file is opened by calling XMLHttpRequest ‘s open() method to start generating a POST request.
4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType() . In this case, we’re using a generic MIME type; you may or may not need to set the MIME type at all, depending on your use case.
5. The FileReader object is used to convert the file to a binary string.
6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to upload the file’s content.

Handling the upload process for a file, asynchronously

Example: Using object URLs to display PDF

Object URLs can be used for other things than just images! They can be used to display embedded PDF files, or any other resources that can be displayed by the browser.

In Firefox, to have the PDF appear embedded in the iframe, and not proposed as a downloaded file, the preference pdfjs.disabled must be set to false .

And here is the change of the src attribute:

Example: Using object URLs with other file types

You can manipulate files of other formats the same way. Here is how to preview uploaded video: