blueimp jQuery-File-Upload - 如何在没有附加文件的情​​况下提交表单？

Question

我在提交文件上传表单时找到了有关如何添加其他表单数据的解决方案.如果没有要上传的文件,此问题是如何上传其他数据.

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

该脚本已初始化并设置为在附加文件时不自动上载.在fileuploadadd回调中,我附加data.submit()到我的submit事件处理程序.这实现了我们在一个POST请求中提交任务数据和文件.

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

我一直在寻找一个解决方案,并且看起来高低,但在(恕我直言)可怕的文档中找不到任何东西.

看看我的代码如下:

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

Answer 1

试试这个 puglin simpleUpload，不需要表格

网页：

<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>

JavaScript：

$('#simpleUpload').simpleUpload({
  url: 'upload.php',
  trigger: '#enviar',
  success: function(data){
    alert('Envio com sucesso');

  }
});