Как я могу получить Gmail-подобные загрузки файлов для моего веб-приложения?
Я хочу добавить gmail-подобную функцию загрузки файлов для одного из моих проектов. Кто-нибудь может мне помочь с этим?
Мое приложение встроено в vb.net.
Буду признателен за любую помощь или руководство.
Спасибо
10 ответов
Взгляните на SWFUpload, который по сути является API- интерфейсом javascript для абсолютно превосходных возможностей Flash по обработке загрузки файлов. Лучшая вещь там, пока браузеры наконец не догонят.
Из ссылки:
- Загрузите несколько файлов одновременно, нажав Ctrl / Shift в диалоговом окне.
- Javascript обратные вызовы на все события
- Получить информацию о файле до начала загрузки
- Стилизуйте загружаемые элементы с помощью XHTML и CSS
- Отображение информации во время загрузки файлов с использованием HTML
- Нет необходимости перезагрузки страницы
- Работает на всех платформах / браузерах с поддержкой Flash.
- Изящно понижается до обычной формы загрузки HTML, если Flash или javascript недоступны
- Контроль размера файла перед началом загрузки
- Отображать только выбранные типы файлов в диалоге
- Очередь загрузки, удаление / добавление файлов перед началом загрузки
----- загрузка iframe -----
Для начала, вы хотите иметь iframe на своей странице. Это предназначено для связи с сервером. Вы будете скрывать это позже, но пока держите это видимым. Дайте этому iframe атрибут имени, например, "загрузчик" или что-то в этом роде.
Теперь в вашей форме установите в качестве цели имя iframe, а в качестве действия - сценарий, который у вас есть на сервере, который будет принимать загрузку файла (как обычная форма с загрузкой файла). Добавьте ссылку внутри этой формы с текстом "Добавить файл". Установите эту ссылку для запуска функции JavaScript, которая добавит новый ввод в форму. Это можно сделать через DOM, но я бы порекомендовал библиотеку javascript, такую как jquery.
После того, как новый входной файл добавлен в форму, установите событие размытия этого ввода в функцию javascript, которая будет отправлять форму, а затем периодически проверять ее на предмет вывода. Чтение iframe может быть сложным, но это возможно.
Пусть ваш скрипт загрузки файла выдаст "Готово". или имя файла или что-то еще, когда загрузка завершена.
Проверяйте каждую секунду или около того, пока не появится контент. Как только у вас будет содержимое, убейте свой таймер и замените введенный файл именем файла (или "Файл загружен") или что-то еще.
Скройте свой iframe с помощью css.
От YUI! (Пользовательский интерфейс Yahoo), https://yuilibrary.com/yui/docs/uploader/
- Выбор нескольких файлов в одном диалоге "Открыть файл".
- Фильтры расширения файлов для облегчения выбора пользователя.
- Отслеживание прогресса для загрузки файлов.
- Диапазон метаданных файла: имя файла, размер, дата создания, дата изменения и автор.
- Набор событий, отправляемых по различным аспектам процесса загрузки файла: выбор файла, процесс загрузки, завершение загрузки и т. Д.
- Включение дополнительных данных в файл загрузки POST-запроса.
- Более быстрая загрузка файлов по широкополосным соединениям благодаря измененному размеру буфера SEND.
- Ответ сервера на той же странице после завершения загрузки файла.
Совершенно бесплатно
Вот клон загрузчика Gmail. Это точный клон загрузчика Gmail с некоторыми дополнительными возможностями. Вы можете увидеть миниатюры изображений после загрузки. Перетащите миниатюры, чтобы изменить порядок и заменить любой эскиз. Это делается с помощью jQuery. Вы можете увидеть демо здесь. Исходный код можно загрузить бесплатно в виде одного zip-файла.
Я надеюсь, что вы можете легко удалить некоторый код и получить желаемую вещь. Вы можете оставлять комментарии в блоге ABCoder, если вам нужна дополнительная помощь.
Прошло уже 2 года, я использовал uploadify в своей прежней системе, и она работает хорошо. но вам нужно написать некоторый хак-код (например, удерживать сеанс).
Я рекомендую вам использовать jquery upload, который представляет собой чистый HTML, без SWF, без проблем с сессиями и действительно великолепен!
== на 2013, что я написал:
Я обдумываю, что выбрать, SWFupload или uploadify.
но на официальном сайте SWFupload говорится, что он не находился в стадии активной разработки, и автор надеется, что когда-нибудь SWFupload сможет возродиться...
Итак... Я решил попробовать "uploadify", который, кажется, поддерживает много опций, обратных вызовов с большим количеством демоверсий. (после проверки его исходного кода, я предполагаю, что автор оборачивает "SWFupload v1" и "SWFupload v2" в свою "uploadify v3"...)
и есть полный список таких загрузчиков.
Вы говорите о загрузке без постбэка? Взгляните на http://www.phpletter.com/Demo/AjaxFileUpload-Demo/, который создает скрытый iframe, копирует элемент управления вводом и использует iframe для выполнения публикации, чтобы получить файл на сервере.
Если вы ищете поведение, когда пользователь нажимает "прикрепить файл", и автоматически открывается диалоговое окно просмотра файлов, это можно сделать с помощью Javascript, но не работает в FireFox, который имеет меры безопасности, требующие от пользователя вызывать кнопку "Обзор" напрямую (а не программно через скрипт).
Для "автоматической" загрузки используйте Javascript, чтобы присоединить к событию "change" свойство "value" элемента управления "input", чтобы оно выполнялось при выборе файла.
Для решения без флэш-памяти вы можете использовать NeatUpload. Я использовал его в обширном проекте в прошлом году с требованием отсутствия вспышки. Это очень легко интегрировать в существующие решения. Я думал, что это был бриз работать с. В моем ограниченном опыте это проще, чем работать с SWFUpload в ASP.NET. Возможно, потому что NeatUpload построен только для ASP.NET.
Мне бы хотелось немного больше пояснить, как загружать файлы в стиле Gmail.
Вы имеете в виду, как, если он сидит немного, он автоматически прикрепляет его к черновику?
Код Gmail трудно найти, но если бы мне пришлось угадывать, вот как это работает:
- Когда вы нажимаете "прикрепить другой файл", он вставляет элемент управления файлом обычного типа ввода. В IE он также может программно вызывать событие click на кнопке "Обзор", поэтому диалоговое окно файла открывается немедленно (в Firefox этого не происходит, и IE у меня под рукой нет, но я считаю, что IE это позволяет)
- После выбора файла он обнаруживает событие изменения элемента управления вводом и запускает таймер.
- Когда срабатывает таймер, он отсоединяет элемент ввода от формы и добавляет его в другую форму в скрытом фрейме, помещая простую ссылку в основную (видимую) форму. Затем скрытый iframe отправляется для загрузки файла. (Он также может клонировать элемент ввода, но я не пробовал, работает ли это.)