无法使用jQuery On Click方法提交表单

Question

使用jQuery Form ，由于某种原因，我必须通过jQuery on方法on提交表单：

$("#submitImage").on("click", function() {
   $('#loaderForm').ajaxForm(function() {
      alert("Uploaded SuccessFully");
   }); 
});

但这不是提交表格！ 您能否看一下这个演示，让我知道我在这里想念的地方或做错了什么？

  $("#uploadFile").change(function() { $('#image_preview').html(""); var total_file=document.getElementById("uploadFile").files.length; for(var i=0;i<total_file;i++) { $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>"); } }); $("#submitImage").on("click", function() { $('#loaderForm').ajaxForm(function() { console.log("Uploaded SuccessFully"); }); }); 

 input[type=file]{ display: inline; } #image_preview{ border: 1px solid black; padding: 10px; } #image_preview img{ width: 200px; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script> <div class="container"> <form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data"> <input type="file" id="uploadFile" name="uploadFile[]" multiple/> </form> <br/> <button type="button" class="btn btn-success" id='submitImage' >Upload Image </button> <div id="image_preview"></div> </div> 

Answer 1

按钮类型应为“提交”

 <button type="submit" class="btn btn-success" id='submitImage' >Upload Image </button>

Answer 2

将提交按钮移到<form>标记内，其类型应通过submit

<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
  <input type="file" id="uploadFile" name="uploadFile[]" multiple/>
  <input type="submit" class="btn btn-success" id='submitImage' value='Upload Image' />
</form>

否则，您可以调用$('#loaderForm').submit(); 从按钮单击事件中；

<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
  <input type="file" id="uploadFile" name="uploadFile[]" multiple/>

</form>

<button type="button" 
onclick="javascript:function(){ $('#loaderForm').submit(); }"
class="btn btn-success" id='submitImage' >Upload Image 
</button>