停止表單提交時點擊上傳與引導文件輸入

Question

我想能夠包裝一個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>

我會在這個時候考慮任何類型的黑客，使這項工作。

由於

Answer 1

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：function（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 
     } 
    },