使用引导文件输入单击上传时停止表单提交答案

【问题标题】：Stop form submit when click upload with bootstrap-file-input使用引导文件输入单击上传时停止表单提交
【发布时间】：2016-03-04 21:04:57
【问题描述】：

我希望能够以普通形式包装bootstrap file input，当我单击上传（这是一个提交按钮）时，我希望文件能够正常上传而不是提交父表单。如果我可以从表单内部删除文件引导文件输入，这将很容易，但不幸的是我看不到删除它的方法。示例代码

$(function(){
  $("#file").fileinput({
      uploadUrl:"\UploadTargetLink"
    });
  
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/js/fileinput.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css" rel="stylesheet"/>

<form name="mainForm" action="\SomeAction">
  <input type="file" name="fileUpload" id="file"/>
  
  </form>

目前我会考虑使用任何类型的 hack 来完成这项工作。

谢谢

【问题讨论】：

标签： javascript forms input

【解决方案1】：

html 和插件调用：

        $uploadElement.fileinput({
            uploadUrl: '/module/perfrev/ajax-evidence-upload', 
            uploadAsync: true,
            maxFileCount: 10,
            multiple: true,
            uploadExtraData: {userReviewID:plugin.settings.userReviewID}
        })

html: " id="" class="文件文件加载" />

在fileinput.js中更改_upload点击函数添加return false然后它不提交： _uploadClick: 函数 (e) {

        var self = this, $btn = self.$container.find('.fileinput-upload'), $form,
            isEnabled = !$btn.hasClass('disabled') && isEmpty($btn.attr('disabled'));
        if (e && e.isDefaultPrevented()) {
            return;
        }
        if (!self.isUploadable) {
            if (isEnabled && $btn.attr('type') !== 'submit') {
                $form = $btn.closest('form');
                // downgrade to normal form submit if possible
                if ($form.length) {
                    $form.trigger('submit');
                }
                e.preventDefault();
            }
            return;
        }
        e.preventDefault();
        if (isEnabled) {
            self.upload();
            return false;  //here is change
        }
    },

【讨论】：