如何使用文件输入的打开按钮使某些事情发生答案

【问题标题】：How do I make something happen with the open button for a file input如何使用文件输入的打开按钮使某些事情发生
【发布时间】：2020-12-11 14:07:52
【问题描述】：

我给了一个消息传递网站，我想添加一个文件发送者的东西，所以我将输入可见性设置为隐藏并添加了一个标签，但现在我不想有一个提交按钮，我如何制作打开按钮（当您选择文件时）充当提交输入？

.addmessagebutton {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-image: url("../images/plus.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<form action="" method="post">
        <label for="file" style="cursor: pointer; z-index: 1; position: fixed; bottom: 0;"><div class="addmessagebutton"></div>Example</label>
        <input  style="opacity: 0; position: fixed; z-index: 10; bottom: 0;" type="file" name="file" value="w">
      </form>

【问题讨论】：

标签： html css file-upload

【解决方案1】：

您需要添加另一个具有 onclick 操作的按钮。动作可以是 form.submit();

【讨论】：

【解决方案2】：

您可以像这样在输入更改时调用表单的提交事件：

$('input[name=file]').change(function(e){
    $(this).parent().submit();
})

【讨论】：