单击带有引导文件输入的上传时停止表单提交

Stop form submit when click upload with bootstrap-file-input

本文关键字：表单提交 输入 文件 单击      更新时间：2023-09-26

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

$(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>

我会在这个时候考虑任何类型的黑客来使这项工作。

谢谢

html

和插件调用：

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

.html： '" id=" 类="文件文件加载" />

在 FileInput 中.js更改_upload单击函数以添加返回 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
        }
    },
相关文章：