blueimp jQuery-File-Upload - 如何在没有附加文件的情​​况下提交表单？ [英] blueimp jQuery-File-Upload - How do I submit form without files attached?

问题描述

我在提交文件上传表单时找到了有关如何添加其他表单数据的解决方案。如果没有要上传的文件，这个问题就是如何上传附加数据。

I have found solutions on how to add additional form data when submitting the file upload form. This question is how to upload the additional data if there is no file to upload.

我在任务管理应用程序中使用blueimp jquery-file-upload以便拖动并删除文件并将它们附加到任务。

I am using blueimp jquery-file-upload in a task management app in order to drag and drop files and attach them to a task.

脚本已初始化并设置为在附加文件时不自动上传。在 fileuploadadd 回调中，我将 data.submit（）附加到我的 submit 事件处理程序。这样就完成了我们在一个POST请求中提交任务数据和文件。

The script is initialized and setup to not automatically upload when files are attached. On the fileuploadadd callback I attach data.submit() to my submit event handler. This accomplishes that we submit the task data and the files in one POST request.

在添加文件之前我无法访问文件上传 data 使用 data.submit（）函数。我想通过在页面加载时添加一个空文件（然后删除它）来解决这个问题，这会触发绑定 data.submit（）到提交按钮。问题是插件在尝试循环遍历空文件数组时返回错误。如果您在提交表单之前添加了一个文件然后将其删除，也会出现此问题。

Until files are added I'm unable to get access to the file-upload data to use the data.submit() function. I came up with a work around by adding an empty file (and then removing it) on page load which would trigger the binding data.submit() to the submit button. The problem is that the plugin is returning an error while trying to loop through an empty array of files. This problem would also occur if you added a file and then removed it before submitting the form.

我一直在寻找解决方案，并且看起来很高在（恕我直言）可怕的文件中找不到任何东西。

I have been looking for a solution to this for a while and have looked high and low but couldn't find anything in the (IMHO) terrible documentation.

看看我的代码如下：

    $('#post_task').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        disableImagePreview: true,
    }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            var filename = file.name,
                filesize = bytesToSize(file.size) 
                ext = filename.substr(filename.lastIndexOf('.')+1,5),
                icon = '<i class="sprite_file sprite_file-file_extension_'+ext+'"></i>',
                node = $('<li/>').append($('<span/>').html(icon + filename + ' ' + filesize + '<a href="#">&times</a>')).attr('data-index',index);

            node.find('a').click(function(e){
                e.preventDefault();
                var $self = $(this),
                    $listItem = $self.parents('li'),
                    listIndex = $listItem.attr('data-index');
                $listItem.remove();
                $('#files li').attr('data-index',function(index){return index;});
                data.files.splice(listIndex,listIndex);
                console.log(data);
                vardata = data;
            });
            $('#files').append(node);
        });
        $('#post_task').unbind('submit').submit(function(ev){
            ev.preventDefault();
            data.submit();
        });
    });

推荐答案

我遇到了同样的问题，最后我添加了一个如果没有文件，则在提交之前清空文件。

I faced the same problem and I ended up adding an empty file prior to submitting if there is no file.

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

这在我的情况下非常有效，后端在提交的文件为空时收到POST。

This works perfectly in my situation and the backend receives the POST while the submitted file is null.

对于大多数浏览器（经过测试的Chrome和FF），我的后端将不会收到任何文件（null）但是IE8中有一个大小为0.我还没有测试过任何其他浏览器IE。

With most browsers (tested Chrome and FF) my Backend will receive no file (null) but with IE8 there is one with size 0. I haven't tested it with any other IE.

这篇关于blueimp jQuery-File-Upload - 如何在没有附加文件的情​​况下提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！