Может ли Uploadify или Plupload загружать выбранные файлы одновременно с остальными данными формы?

Я планирую использовать библиотеки загрузки изображений Uploadify или Plupload в своем проекте. Причина, по которой я хотел бы использовать одну из этих библиотек, заключается в том, чтобы позволить пользователю выбирать несколько файлов одновременно, а затем загружать их все одновременно.

Моя цель — поместить один из этих элементов управления загрузкой файлов в форму, которая также позволяет пользователю вводить в нее другие данные в дополнение к выбору набора изображений. Затем пользователь должен иметь возможность отправить форму, а введенные данные и выбранные изображения будут загружены и обработаны на сервере.

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

Мой вопрос: есть ли способ заставить Uplodify или Plupload отправлять выбранные файлы на сервер только тогда, когда пользователь фактически нажимает кнопку отправки формы? Я не хочу, чтобы пользователь сначала загружал файлы во временную папку на сервере, а затем отдельно отправлял форму.

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

Базовый элемент управления Asp.Net FileUpload дает мне часть того, что я хочу сделать, позволяя мне отправлять файлы одновременно с остальными данными формы, но, очевидно, не позволяет пользователю выбирать несколько файлов в однажды.


jquery asp.net uploadify plupload
person bbeny    schedule 19.12.2011    source источник
comment
Почему вы не используете абзацы с вашим вопросом, чтобы сделать его более читабельным?   -  person Lion    schedule 19.12.2011
comment
Я отредактировал его, чтобы использовать абзацы.   -  person Rob Stevenson-Leggett    schedule 19.12.2011

Ответы (4)


arrow_upward
1
arrow_downward

Plupload очень гибок, на самом деле то, что люди понимают под Plupload, когда они упоминают, обычно это просто виджет пользовательского интерфейса или jQuery. Но это не так - Plupload - это чистый JavaScript API, который можно использовать для создания своей собственной реализации. То, что вы говорите - загрузка файлов при нажатии кнопки отправки также возможна. На самом деле пример, который поставляется с пакетом Plupload, показывает именно это (см.: examples/jquery/jquery_ui_widget.html):

// Client side form validation
$('form').submit(function(e) {
    var uploader = $('#uploader').plupload('getUploader');

    // Files in queue upload them first
    if (uploader.files.length > 0) {
        // When all files are uploaded submit form
        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                $('form')[0].submit();
            }
        });

        uploader.start();
    } else
        alert('You must at least upload one file.');

    return false;
});
person jayarjo    schedule 25.12.2011

arrow_upward
3
arrow_downward

У вас может быть запущенный экземпляр Plupload, позволяющий пользователю выбирать свои изображения (файлы) и устанавливать для автоматической загрузки значение false.

Затем, когда пользователь нажимает кнопку «Отправить», вы можете запустить вызов ajax для отправки формы, а затем запустить загрузку как отдельное событие JS после отправки данных формы.

Имеет ли это смысл?

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

http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/

person bigamil    schedule 20.12.2011
comment
Это может быть жизнеспособным вариантом. Если я установлю для автозагрузки значение false, элемент управления предоставит пользователю кнопку для загрузки файлов вручную. Мне нужно иметь возможность скрыть эту кнопку, чтобы пользователь не мог загружать файлы, пока я не запущу загрузку после отправки формы. Знаете ли вы, можно ли скрыть кнопку загрузки элемента управления, когда для автозагрузки установлено значение false? - person bbeny; 20.12.2011
comment
Я попытался установить для свойства autostart значение true или false, и это не имеет значения. Кнопка «Начать загрузку» все равно отображается. Я тестировал это в IE 8 и FF 8. Нужно ли мне устанавливать какие-либо другие свойства, если я хочу, чтобы загрузка файла начиналась, как только пользователь выбирает файлы? - person bbeny; 21.12.2011
comment
Да, вы должны иметь возможность скрыть это с помощью стилей CSS, а затем просто запустить запуск загрузки через JS. Вы в конечном итоге получить это работает? Извините за медленный ответ... - person bigamil; 30.12.2011

arrow_upward
2
arrow_downward

У Uploadify есть опция для этого.

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

person Rob Stevenson-Leggett    schedule 19.12.2011
comment
Спасибо, Роб, это определенно шаг вперед. Однако файлы по-прежнему загружаются на сервер до отправки всей формы. Нет ли способа заставить пользователя выбирать файлы и загружать их только после того, как вся форма будет окончательно отправлена? Мне все равно, если пользователь не увидит эскизы файлов, которые они выбрали для загрузки. Кроме того, знаете ли вы, есть ли у Plupload эта функция «авто» или что-то подобное? - person bbeny; 19.12.2011

arrow_upward
0
arrow_downward

Увидеть ниже. «multipart_params» содержит данные формы. Я использую обычную кнопку отправки в plupload для запуска формы.

var uploader = jQuery("#html5_uploader").pluploadQueue({
    runtimes : 'html5,html4',
    url : '/upload/',
    max_file_size : '100mb',
    chunk_size: '1mb',
    unique_names : false,
    multipart: true,
    multipart_params: { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() },
    headers : {'X-Requested-With' : 'XMLHttpRequest'},
    preinit : {
        BeforeUpload: function(up, file) {
            up.settings.multipart_params = { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() };
        }, 
        FileUploaded: function(Up, File, Response) {

        }
    }
});
person emeth    schedule 29.04.2012