Как получить Gmail-подобные загрузки файлов для моего веб-приложения?

Ответ 1

Откажитесь от SWFUpload, который по сути является api javascript, чтобы полностью перегружать возможности загрузки файлов. Лучше всего там, пока браузеры, наконец, не догонят.

От ссылки:

• Загрузите несколько файлов одновременно с помощью ctrl/shift-select в диалоговом окне
• Обратные вызовы Javascript для всех событий
• Получить информацию о файлах перед загрузкой
• Элементы загрузки стиля с помощью XHTML и css
• Отображать информацию во время загрузки файлов с помощью HTML
• Не требуется перезагрузка страницы
• Работает на всех платформах/браузерах с поддержкой Flash.
• Грамотно деформирует нормальную форму HTML-загрузки, если Flash или javascript недоступен
• Управление файлами перед запуском загрузки
• Отображать только выбранные типы файлов в диалоговом окне
• Очередь загружает, удаляет/добавляет файлы перед началом загрузки.

Демос

----- загрузка iframe -----

Чтобы начать, вы хотите иметь iframe на своей странице. Это предназначено для связи с сервером. Вы скроете его позже, но пока, держите его видимым. Дайте этому iframe атрибут имени, например "uploader" или что-то еще.

Теперь в вашей форме установите цель для имени iframe и действия на script, которые у вас есть на сервере, который будет принимать загрузку файла (например, обычную форму с загрузкой файла). Добавьте ссылку внутри этой формы с текстом "Добавить файл". Установите эту ссылку для запуска функции javascript, которая добавит новый ввод в форму. Это можно сделать с помощью DOM, но я бы порекомендовал библиотеку javascript, например jquery.

После добавления нового файла в форму установите событие размытия этого ввода на функцию javascript, которая будет отправлять форму, а затем периодически проверять ее на вывод. Чтение iframe может быть сложным, но это возможно.

Загрузите файл script для вывода "Готово". или имя файла или что-то, когда загрузка завершена.

Проверяйте его каждую секунду или около того, пока не будет содержимое. После того, как у вас есть контент, убейте ваш таймер и замените ввод файла именем файла (или "Загруженным файлом" ) или любым другим.

Скройте свой iframe с помощью css.

Ответ 2

Из YUI! (Пользовательский интерфейс Yahoo), https://yuilibrary.com/yui/docs/uploader/

• Выбор нескольких файлов в одном диалоговом окне "Открыть файл".
• Фильтры расширения файлов для облегчения выбора пользователя.
• отслеживание выполнения загрузки файлов.
• Диапазон метаданных файла: имя файла, размер, дата, дата, дата и автор.
• Набор событий, отправленных по различным аспектам процесса загрузки файлов: выбор файлов, загрузка, завершение загрузки и т.д.
• Включение дополнительных данных в запрос POST для загрузки файлов.
• Более быстрая загрузка файлов на широкополосных подключениях из-за измененного размера буфера SEND.
• Ответ сервера на одной странице после завершения загрузки файла.

Полностью бесплатный

Ответ 3

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

Надеюсь, вы сможете легко удалить какой-то код и получить нужную вещь. Вы можете оставлять комментарии в блоге ABCoder, если вам нужна дополнительная помощь.

Ответ 4

Для не-флеш-решения вы можете использовать NeatUpload. Я использовал его в обширном проекте в прошлом году с требованием без вспышки. Это очень легко интегрировать в существующие решения. Я думал, что это был легкий ветерок. Проще, в моем ограниченном опыте, чем работа с SWFUpload в ASP.NET. Вероятно, потому что NeatUpload построен только для ASP.NET.

Ответ 5

Вы говорите о загрузке без полной обратной пересылки страницы? Взгляните на http://www.phpletter.com/Demo/AjaxFileUpload-Demo/, который создает скрытый iframe, копирует элемент управления ввода и использует iframe для выполнения сообщения, чтобы получить файл на сервере.

Если вы ищете поведение, при котором пользователь нажимает "Прикрепить файл", и автоматически открывается диалоговое окно просмотра файлов, это может быть сделано с помощью Javascript, но не работает в FireFox, в котором есть меры предосторожности, требующие пользователь должен напрямую вызвать кнопку "Обзор" (а не программно через script).

Для "автоматической" загрузки используйте Javascript для присоединения к событию "change" для свойства "value" элемента управления "input", чтобы он выполнялся, когда файл был выбран.

Ответ 6

Вместо этого вы можете использовать Flickr Uploader.

Ответ 7

Теперь прошло уже 2 года, я использовал функцию uploadify в своей старой системе, и она работает хорошо. но вам нужно написать код взлома (например, провести сеанс).

Я рекомендую вам использовать jquery upload, который является чистым HTML, без swf, никаких проблем с сеансом и действительно здорово!

== в 2013 году, что я писал:

Я рассматриваю, что выбрать, SWFupload или uploadify.

но на официальном сайте SWFupload говорится, что он не находится в активной разработке, и автор надеется, что когда-нибудь SWFupload сможет возродиться...

так... Я решил попробовать "uploadify", который, похоже, поддерживает множество опций, обратные вызовы с большим количеством демонстраций. (после проверки его исходного кода, я думаю, автор обертывает "SWFupload v1" и "SWFupload v2" в своем "uploadify v3"...)

и есть полный список этого типа загрузчиков.

Ответ 8

Я хотел бы немного уточнить загрузку файла в формате Gmail.

Вы имеете в виду, что, если он сидит немного, он автоматически привязывает его к черновику?

Ответ 9

Коду Gmail сложно найти свой путь, но если бы я должен был догадаться, вот как это работает:

• Когда вы нажимаете "Прикрепить другой файл", он вставляет обычный файл управления типом ввода. В IE он также может программно запускать событие click на кнопке "browse", так что диалоговое окно файла открывается немедленно (оно не работает в firefox, и у меня нет IE, но я считаю, что IE позволяет это)
• После выбора файла он обнаруживает событие изменения элемента управления ввода и запускает таймер.
• Когда таймер запускается, он отделяет входной элемент от формы и добавляет его в другую форму в скрытом iframe, помещая простую ссылку в основную (видимую) форму. Затем скрытый iframe отправляется на загрузку файла. (Он также может клонировать элемент ввода, но я не пробовал, работает ли это.)

Ответ 10

Вы можете использовать iFrames для этого