Question

我正在使用BlueImp Jquery File Upload向现有表单添加文件上传功能。当选择文件时，即总是上传一些带有表单的文件时插件工作正常，但在我的情况下，我希望文件上传部分是可选的，这样用户就可以提交表单了文本输入已填充。

在Stack Overflow（ref 1，ref 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;
    });

任何人都可以看到如何使这个工作，或建议一个更好的方法。看起来非常hacky，但我在为这个（看似相当普遍的）问题寻找解决方案时已经完全空白了。

非常感谢！

使用BlueImp Jquery文件上载的可选文件上载

0 个答案: