文件上传指南：掌握input intricacies，领导就不会因为input文件上传而责骂你了！

1. input 的全部类型

input元素用于收集用户输入的数据，是表单中最常见的元素之一。input 元素有以下几种类型：

• text：文本输入框，用于输入单行文本。
• password：密码输入框，用于输入密码。
• checkbox：复选框，用于选择多个选项之一。
• radio：单选按钮，用于从一组选项中选择一个选项。
• button：按钮，用于提交表单或执行其他操作。
• submit：提交按钮，用于提交表单。
• reset：重置按钮，用于将表单重置为初始状态。
• file：文件上传输入框，用于选择要上传的文件。

2. input 的 accept、multiple 属性介绍

accept 属性用于指定可以上传的文件类型。例如，accept="image/" 表示只允许上传图像文件。accept 属性可以接受多个值，用逗号分隔。例如，accept="image/,video/*" 表示允许上传图像文件和视频文件。

multiple 属性用于指定是否允许同时选择多个文件。如果 multiple 属性设置为 true，则允许同时选择多个文件。如果 multiple 属性设置为 false，则只允许选择一个文件。

3. input 事件监听

input 元素支持多种事件，包括 change、input、focus、blur 等。change 事件在文件选择发生改变时触发。input 事件在用户输入时触发。focus 事件在用户获得焦点时触发。blur 事件在用户失去焦点时触发。

<input type="file" id="file-input">

<script>
  // 监听change事件
  document.getElementById('file-input').addEventListener('change', function() {
    // 获取选中的文件
    const files = this.files;

    // 循环遍历选中的文件
    for (const file of files) {
      // 获取文件名称
      const fileName = file.name;

      // 获取文件大小
      const fileSize = file.size;

      // 获取文件类型
      const fileType = file.type;

      // 显示文件信息
      console.log('文件名：' + fileName);
      console.log('文件大小：' + fileSize);
      console.log('文件类型：' + fileType);
    }
  });
</script>

4. 更改 input 文件上传 css 样式

input 文件上传元素的默认样式可能不是你想要的。你可以使用 CSS 来更改 input 文件上传元素的样式。

input[type=file] {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  color: #333333;
  padding: 5px;
}

5. 上传图片文件

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*">
  <input type="submit" value="上传">
</form>

6. 结论

input 文件上传元素是一个强大的工具，可以用来收集用户输入的文件。通过设置 accept 和 multiple 属性，可以控制用户可以上传的文件类型和数量。通过监听 input 元素的事件，可以获取用户选择的文件的信息。通过修改 input 元素的 CSS 样式，可以更改 input 文件上传元素的外观。