javascript - onclick 事件不等待文件选择

Question

我正在尝试使用单个按钮在 html 中使用文件输入。

我的html:

<input type="file" class="btn btn-purple" id="inventory_csv" name="inventory_csv" onchange="this.form.submit()" style="display:none">
<button name="upload_inventory" id="upload_inventory" class="btn btn-purple btn-labeled fa" onclick="chooseFile()">Upload Inventory</button>

Javascript:

function chooseFile() {
    $("#inventory_csv").click();
}

脚本无法正常工作。当我单击 upload_inventory 按钮时，它不会等待我选择文件。它打开文件选择对话框并导航到下一页。

我希望它等待我选择文件，然后转到下一页。

Answer 1

button的默认行为是submit，将其类型设置为button

<button type="button" onclick="chooseFile()">Upload Inventory</button>

或者，防止其默认行为，例如

<button onclick="return chooseFile()">Upload Inventory</button>

脚本

function chooseFile() {
     $("#inventory_csv").click();
     return false;
}