HTML input type=“file“

html input type="file"

一念花开fyg

2470人浏览 · 2025-04-26 08:42:21

一念花开fyg · 2025-04-26 08:42:21 发布

在这里插入图片描述

概述

<input type="file" />

作用：
带有 type=“file” 的元素允许用户可以从他们的设备中选择一个或多个文件。
选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。

尝试

最基本文件选择
在这里插入图片描述

value 值

文件 input 的 value 属性包含了一个字符串，表示已选择文件的路径。
若没有选择，则该值为空字符串（“”）；
若选择了多个文件，则 value 表示选择文件列表中的第 1 个文件。（可用 File_Api 标识其他文件）

注意：为了阻止恶意软件猜测文件路径，该值的字符串表示总是以 C:\fakepath\ 为前缀的文件名，而并不是文件的真实路径。

属性

required

【作用】提交表单前必须选择文件。（未选中会提示）
【值】必须指定非空值
【示例】
非空

<input type="file" required />

在这里插入图片描述

accept

【作用】属性值是字符串，定义了文件 input 应该接受的文件类型。
【值】见唯一文件类型说明符列表。
tip: 你将看到文件选择器只允许你选择 accept 值指定的文件类型（实际接口会按不同的浏览器和操作系统有所不同）。

【示例】

acccept 属性限制

<!-- 使用1：表示可选择所有图片类型，和 pdf文件 -->
<input type="file" accept="image/*,.pdf" />

<!-- 使用2：用以识别 Microsoft Word文件 -->
<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
/>

在这里插入图片描述

capture

【作用】capture 属性是一个字符串，若 accept 属性指出 input 允许图片/视频类型，则它指定了使用哪个摄像头去获取这些数据。
【值】
user 表示应使用前置摄像头和麦克风；
enviroment 表示应使用后置摄像头和麦克风；
若缺少此属性，则用户代理可以自由决定做什么。如果请求的前置模式不可用，则用户代理可能退回到其首选的默认模式。

【备注】 capture 以前是一个布尔类型的属性，如果存在，则请求使用设备的媒体捕获设备（如：摄像机），而不是请求一个文件输入。

multiple

【作用】当指定布尔类型属性 multiple (en-US) 时，文件 input 允许用户选择多个文件。
【值】无值属性，有该属性即允许选择多个文件，类似 checked；

【示例】

允许同时选择多个文件

<input type="file" accept="image/*,.pdf" multiple />

在这里插入图片描述

唯一文件类型说明符

唯一文件类型说明符是一个字符串，表示在 file 类型的 <input> 元素中用户可以选择的文件类型。

每个唯一文件类型说明符可以采用下列形式之一：

类 1：一个以英文句号（“.”）开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.pdf 或 .doc。
类 2：一个不带扩展名的 MIME 类型字符串。
- 字符串 audio/*，表示“任何音频文件”。
- 字符串 video/*，表示“任何视频文件”。
- 字符串 image/*，表示“任何图片文件”。

【示例】

<input type="file" accept="image/*,.pdf" />
<!-- accept 属性设置，设置后，限制选择上传文件的类型 -->

事件

change: 这里是文件选中修改触发的事件；

input: 这里是选中文件后触发的事件；

常用！！！

基本功能使用

基本的文件选中

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">选择要上传的文件</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>提交</button>
  </div>
</form>

说明：无论用户的设备或操作系统是什么，文件输入都提供一个按钮，打开一个允许用户选择文件的文件选择对话框。
通过包含上述的 multiple 属性，可以指定一次选择多个文件。
用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（如按住 Shift 或 Control，然后单击）。
如果只想让用户为每个 <input> 选择一个文件，那么省略 multiple 属性。

获取已选择文件的信息

【获取信息语法】

myinputDOMEle.files // type="file"表单选择文件后，获取其信息

【示例】

获取已选择文件的信息

在这里插入图片描述

【FileList 对象】当前选中的所有文件信息（对象）。
值：
File 对象：单个文件的信息；
length：选中文件的个数；

【File 对象】文件信息对象
{String} name 文件名
{Number} lastModified 文件最后一次修改的日期时间（时间戳格式）
{Object} lastModifiedDate：文件最后一次修改的日期时间（Date 对象格式）（已弃用）
{Number} size: 文件大小（单位字节数）
{String} type：文件的 MIME 类型；(image/png)
{String} webkitRelativePath：指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 webkitdirectory 属性的 file 选择器）这是非标准的，应该谨慎使用。

【备注】你可以在所有现代浏览器中读写 myinputDOMEle.files 的值；另该特性已经添加到了 Firefox 57 中（见 Firefox bug 1384030）。

限制可接受文件类型

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">选择要上传的文件</label>
    <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>提交</button>
  </div>
</form>

常用：
accept=“image/png” 或 accept=“.png” 接受 PNG 文件。
accept=“image/png, image/jpeg” 或 accept=“.png, .jpg, .jpeg” 接受 PNG 或 JPEG 文件。
accept=“image/*”——接受任何带有 image/_ MIME 类型的文件。（许多移动设备也允许用户在使用它时用摄像头拍照。）
accept=“.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document” 接受类似于 MS Word 文档的任何文件。

应用

文件上传实际使用

源码


<body>
  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple
      />
    </div>
    <div class="preview">
      <p>No files currently selected for upload</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>

  <script>
    // 隐藏 Input
    const input = document.querySelector('input')
    const preview = document.querySelector('.preview')

    input.style.opacity = 0

    // 监听 change 事件
    input.addEventListener('change', updateImageDisplay)

    function updateImageDisplay() {
      // 清空预览区
      while (preview.firstChild) {
        preview.removeChild(preview.firstChild)
      }

      // 已选文件信息对象
      const curFiles = input.files
      if (curFiles.length === 0) {
        // 未选中文件
        const para = document.createElement('p')
        para.textContent = 'No files currently selected for upload'
        preview.appendChild(para)
      } else {
        // 选中文件
        const list = document.createElement('ol')
        preview.appendChild(list)

        for (const file of curFiles) {
          const listItem = document.createElement('li')
          const para = document.createElement('p')
          if (validFileType(file)) {
            // 输出文件信息
            para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`
            // 预览图片
            const image = document.createElement('img')
            image.src = URL.createObjectURL(file)

            listItem.appendChild(image)
            listItem.appendChild(para)
          } else {
            para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`
            listItem.appendChild(para)
          }

          list.appendChild(listItem)
        }
      }
    }

    // #辅助：校验文件类型
    // https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types
    const fileTypes = [
      'image/apng',
      'image/bmp',
      'image/gif',
      'image/jpeg',
      'image/pjpeg',
      'image/png',
      'image/svg+xml',
      'image/tiff',
      'image/webp',
      'image/x-icon',
    ]

    function validFileType(file) {
      return fileTypes.includes(file.type)
    }

    // # 转换文件显示和大小
    function returnFileSize(number) {
      if (number < 1024) {
        return `${number} bytes`
      } else if (number >= 1024 && number < 1048576) {
        return `${(number / 1024).toFixed(1)} KB`
      } else if (number >= 1048576) {
        return `${(number / 1048576).toFixed(1)} MB`
      }
    }
  </script>
</body>

说明：
1、默认的 input 常不使用，因为比较难看；所以：隐藏按钮，并通过 label 映射打开文件选择；
2、上传文件处理；（本地预览、文件大小单位转换、文件类型判断等）

注意

1、脚本中不能设置文件选取器的值

做下面这样的事情是没有效果的：

const input = document.querySelector('input[type=file]')
input.value = 'foo'

2、File 对象-mame 键的安全机制

当使用 <input type="file"> 选择文件时，出于明显的安全原因，源文件的实际路径没有显示在 input 的 value 属性中。
实际上显示了文件名，并用 C:\fakepath\ 附加在路径的开头。
这种怪癖有一些历史原因，但它在所有现代浏览器中都受到支持，而且实际上在规范中也有定义。