Необязательная загрузка файла с помощью BlueImp Jquery File Upload

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

Вопрос о том, как разрешить загрузку файлов, задавался несколько раз как в Stack Overflow (ref 1, ссылка 2) и в самом проекте GitHub (ref) без подходящих ответов, поэтому сейчас я пытаюсь решить эту проблему немного по-другому.

Единственный способ, который я могу придумать, - это создать отдельную кнопку отправки, которая сначала обрабатывает «нормальные» (без загрузки файлов) поля формы с помощью вызова AJAX, а затем в случае успеха программно запускает загрузку файлов в отдельный процесс. Далеко не идеальный, но единственный способ заставить процесс работать.

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

Вот код:

$(function () {
    'use strict';

    var myFiles = new Array();

    $('.files').bind('change', function (e) {
        var f;
        f = e.target.files || [{ name: this.value }];
        myFiles.push(f[0]);
    });


    // Initialize the jQuery File Upload widget:
    $('#fileupload1').fileupload({
        url: '/something/api/UploadApi/PostFiles',
        singleFileUploads: false
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload1').fileupload(
        'option',
        'redirect',
        window.location.href.replace(/\/[^\/]*$/, '/cors/result.html?%s')
    );


    // Start things off when submit button clicked
    $('#messageSubmit1').click(function () {

        var message = $('textarea', form).val();

        if (!message) {
            alert('Please enter a message!');
            return false;
        }

        // Post text data
        $.ajax({
            url: '/something/api/MessageApi/AddMessage/',
            data: {
                'message': message
            },
            dataType: 'xml',
            success: function (responseXML) {
                // When text data saved successfully, post files
                $('#fileupload1').fileupload('send', { files: myFiles });
            }
        });
        return false;
    });

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

Большое спасибо!


person Dan    schedule 03.04.2014    source источник