html输入文件点击事件在选择文件之前提交表单答案

【问题标题】：html input file click event submit form before select filehtml输入文件点击事件在选择文件之前提交表单
【发布时间】：2016-10-19 10:19:29
【问题描述】：

我正在尝试实现上传文件，我想先调用文件输入来选择文件，选择文件后，再进行表单提交。但是在我的代码中，它会立即调用表单提交。我尝试过使用 ajax 但不起作用。在用户选择文件后，我想以任何方式提交表单。但似乎找不到等待文件输入点击功能完成的方法（我的意思是直到用户选择了一个文件）

这是我的html：

 <input type="text" id="body" name="body" >
 <button type="submit"  id="sent_1" value="Send">Submit</button>         
 <input type="file" id="image_file" name="image" size="chars">
 <button  id="send_img_btn" value="image">Image</button></td>

这是我的 javascript：

    $('#send_img_btn').click(function(e){
          e.preventDefault();
    $('#image_file').click();
    $('#form').submit();
});

function imageClick(){
       $('#image_file').click();
}

function submit(){
       $('#form').submit();
}

已编辑：也许我没有清楚地说明我的问题。问题是当
我单击按钮，它只是立即提交表单，而不是等待我选择文件。我希望它等到我选择文件然后提交。

【问题讨论】：

如果您打算在用户选择文件后立即提交表单，则使用输入的 change 事件来完成同样的操作

标签： javascript jquery html

【解决方案1】：

如果您想在选择文件后立即提交表单，请使用该输入的更改事件。

<form action="formActionUrl" name="myForm">
   <input type="file" name="myInput"/>
</form>

在脚本中

$(":file").change(function(e){
     $("[name=myForm]").trigger('submit');
});

【讨论】：

【解决方案2】：

在<button> 标记中插入属性type="button"。默认情况下，<button> 标签的作用类似于<form> 中的输入类型提交。

<button type="button" id="send_img_btn">Image</button>

【讨论】：

解决了我的问题！