单击事件的多个答案

Question

我正在处理异步文件上传。我想在单击按钮后调用文件对话框，然后读取文件信息（名称、大小），然后最终将它们发送到服务器。我的问题是：第一次点击后脚本发送一包数据（很好）但是第二次点击后它发送两包数据，第三次点击 = 三包等

有什么问题以及如何修复？

JS:

function FileAdd(){
$('#input_file').trigger("click");

$('#input_file').on('change', function(){
    input = $('#input_file')[0];
    console.log(input.files[0]);
});
}

HTML:

<button id="File_add" type="button" onclick="FileAdd();">+ Add</button>
<input type="file" multiple="" name="files" id="input_file">

编辑： 解决方案很简单：将部分代码放入 $(document).ready(function(){}

Answer 1

每次单击按钮时，您都在注册一个新的 change 事件。

你能把你的活动注册移到功能之外吗？

$('#input_file').on('change', function(){
    input = $('#input_file')[0];
    console.log(input.files[0]);
});

function FileAdd(){
  $('#input_file').trigger("click");
}

单击事件的多个答案

Multiple answers on click event

javascript

jquery

file-upload