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：

<script>
    function chooseFile() {
        $("#inventory_csv").click();
    }
</script>

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

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

Answer 1

您可以检测文件是否被选中并在之后提交表单。

  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       //submit form or whatever
     });
  });

Answer 2

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

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

OR，防止其默认行为，如

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

脚本

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

Answer 3

正如Satpal所提到的，接下来会发生按钮默认行为并触发表单。

您可以阻止默认行为或更改按钮类型：

<button type="button" ...></button>

或者

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

onclick事件不等待文件选择

3 个答案: