jquery - 使用 Blueimp jquery 文件上传插件的可选文件上传

Question

该问题与来自blueimp的jquery文件上传插件有关

我正在构建一个文件上传是可选的表单。事实证明，当没有选择要上传的文件时，我无法发布表单。正因为如此，如果用户决定不添加实际数据，我必须在我的页面上创建两个表单并执行所有脏检查以删除上传的文件。

问题是 ：

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

Answer 1

我自己也有同样的问题。我有一个表单（内置 Angular），使用蓝色 imp 角度实现。表单本身有字段；该文件是可选的。需要是一个帖子（有或没有文件）。

在 submit() 上没有任何反应。

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

Answer 2

我知道我迟到了，但迄今为止没有列出真正的解决方案。您可以通过手动调用 add 事件来伪造正在添加文件的事实，例如：

$('#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;
});

这使您可以与数据传递到服务器的方式保持一致。

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) {/* ... */});

Answer 4

设置SingleFileUploads为false对 JQuery 文件上传器没有太大帮助，因为这里讨论的似乎有一个错误。所以我把那件事恢复为真。

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