使用Blueimp jQuery文件上传插件实现可选文件上传

Question

这个问题与蓝色小恶魔的jquery文件上传插件有关。

我正在构建一个表单，其中文件上传是可选的。结果发现当没有选择上传文件时无法提交表单。因此，我不得不在页面上创建两个表单，并进行所有的脏检查，以便在用户决定不添加实际数据时删除已上传的文件。

问题是：

即使没有选择文件，我是否可以提交表单，以便仍然能够在服务器端接收到其他表单数据？

- Roshan Gautam

---

你尝试过这个吗：$( "#fileupload" ).submit(); - vani saladhagu

即使未选择文件，您仍然可以提交表单。 您不应该创建两个表单。 - Max

@Max 这个怎么做？ - Dan

Answer 1

我本人也遇到了同样的问题。我有一个表单（使用Angular构建），使用了blue imp angular实现。表单本身有字段，文件是可选的。需要一个单独的POST请求（带或不带文件）。

在submit()上什么都没有发生。

上面列出的“有用的事件”只有在添加文件时才会触发。

- Tony

Answer 2

我知道我来晚了，但是迄今为止还没有真正的解决方案。您可以通过手动调用添加事件来模拟添加文件的情况：

$('#fileupload').fileupload('add', { files: [{}] });

您需要设置一个变量来存储表单信息，在添加时更新该变量，并在没有文件的情况下触发上述添加操作。以下是代码示例：

var fileData;
$('#fileupload').fileupload({
    add: function (e, data) {
        fileData = data;
    }
});

$('form').submit(function () {
    if (!fileData) {
        $('#fileupload').fileupload('add', { files: [{}] });
    }
    fileData.formData = params;
    fileData.submit();
    return false;
});

这样可以确保向服务器传递数据的一致性。

- fanfavorite

Answer 3

我知道这是一个老问题，但对于那些与此问题作斗争的人：

你需要深入研究这里的文档：

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

这里有一些有用的事件列表：

$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});

- Alihalabyah

---

这些事件中有任何一个是问题的答案吗？ - Agey

Answer 4

将SingleFileUploads设置为false并没有对JQuery文件上传器有太大帮助，因为似乎存在一个错误，如此处所讨论的那样。所以我把那个东西重新设置为true。

我将输入分成了两个单独的表单——一个用于文本字段输入，另一个用于文件（通过JQuery文件上传器）。对于文本字段表单，我保留了一个可见的按钮供用户点击。对于另一个表单，我隐藏了按钮。因此，一旦用户点击可见按钮，我仅提交文本输入并在后端创建数据库记录（使用AJAX调用完成），在AJAX调用的成功字段中，如果文件计数大于0，则.click()隐藏按钮。

- A.R.K.S