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

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

1 голос
/ 19 декабря 2011

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

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

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

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

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

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

Ответы [ 4 ]

3 голосов
/ 20 декабря 2011

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

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

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

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

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

2 голосов
/ 19 декабря 2011

Uploadify имеет опцию для этого.

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

1 голос
/ 25 декабря 2011

Plupload очень гибок, на самом деле то, что люди понимают под Plupload, когда они упоминают, что это обычно просто виджет UI или 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;
});
0 голосов
/ 30 апреля 2012

Смотри ниже.«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) {

        }
    }
});
...