Улучшите управление загрузкой файлов с помощью jQuery.

При использовании CSS для украшения элементов формы никогда не существовало хорошего способа украсить элемент управления загрузкой файлов. http://www.quirksmode.org/dom/inputfile.html (кажется, на веб-сайте есть ошибка) предоставляет метод улучшения управления загрузкой файлов. Вдохновленный этим методом, я объединил собственные проекты для улучшения его функций. После доработок он имеет следующие характеристики:

1. То, что видит пользователь, — это не кнопка загрузки файла, а кнопка;
2. Формат изображений может быть ограничен;
3. Изображения, выбранные пользователем, могут отображаться в определенной области (кроме IE6, Safari и Opera);
4. Управление загрузкой файлов остается доступным, когда пользователь отключает js.

Я инкапсулировал его в плагин jQuery. Поскольку в Интернете уже есть плагин под названием jQuery.fakeFile, чтобы отличить его, я назову его jQuery.liveFakeFile. В этой статье будут представлены принцип и использование этого метода.

1. Спрос

Требование очень простое, но его реализация требует определенных навыков, которые кратко описываются следующим образом:

1. Требуется, чтобы не появлялся элемент управления загрузкой файла, а была кнопка «загрузить картинку». При нажатии пользователем на кнопку всплывает диалоговое окно с изображением;
2. После выбора изображения изображение отображается над кнопкой. По умолчанию отображается изображение по умолчанию;
3. Формат выбранного изображения оценивается. Если он не соответствует требованиям, под кнопкой отображается сообщение об ошибке и отображается изображение по умолчанию.

2. Анализ

Реализуйте эффект появления диалогового окна выбора изображения при нажатии кнопки

Перед элементом управления загрузкой текста имеется поле ввода. Вдохновленные Майклом МакГрейди ( ljzcome однажды перевел эту статью), мы создаем кнопку «загрузить изображение», затем изменяем свойство непрозрачности элемента управления загрузкой файла, устанавливаем его на 0, и используйте свойство позиционирования, чтобы сделать область щелчка над кнопкой. Таким образом, каждый клик пользователя кажется нажатой кнопкой, но на самом деле это сам элемент управления загрузкой текста.

Отображать выбранные пользователем изображения

Отображение изображений кажется очень простым, но существуют различия между браузерами. IE6 не может отображать изображения правильно, а IE7 может отображать их с помощью фильтра AlphaImageLoder. Firefox не может нормально отображать изображения, но у него есть метод для отображения изображений — getAsDataURL(). Другие браузеры Opera и Safari не могут правильно отображать изображения. Поэтому мы используем технологию анализа браузера для индивидуальной обработки разных браузеров и позволяем нормально отображать текст только браузерам, которые не могут отображать изображения.

Определить формат изображения

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

анализ юзабилити

Поскольку js используется для изменения внешнего вида элемента управления загрузкой файлов, необходимо убедиться, что пользователи могут нормально загружать изображения, когда js отключен. Итак, то, что мы помещаем в структуру html, должно быть обычным элементом управления загрузкой файлов.