input type=“file“属性详解，利用capture调用手机摄像头

忘是亡心i 2021-07-04 20:36 914阅读 0赞

`<input>` type 类型为 `file` 的标签，可以选择一个或多个文件，通过表单上传到服务器，也可以通过 `Javascript` 的 `File API` 对文件进行操作。

实例：

**常用参数：**

`Value`：`DOMString` 选择文件的路径。`DOMString` 是`UTF-16`字符串。由于`JavaScript`已经使用了这样的字符串，所以`DOMString` 直接映射到 `String`。

`事件`：`change` 事件 `input`

`常用属性`：`accept, multiple, required, capture`

`IDL 属性`：“文件” 和 “值”

方法：`select()`

## `Value`： ##

文件输入的 `value` 属性，表示所选文件的路径。

如果选择了多个文件, 这个值表示第一个被选择的文件路径。JavaScript 可以通过 `Input` 的 `FileList` 属性获取到所有的文件路径。

没有选择文件该值为空字符串。

## 用法： ##

<form>
     <div>
       <label for="file">Choose file to upload</label>
       <input type="file" id="file" name="file" multiple>
     </div>
     <div>
       <button>Submit</button>
     </div>
    </form>

忽略用户设备的影响, `input` 提供了一个按钮，可以打开选择文件的窗口。  
![在这里插入图片描述][20200818153230786.png]  
在上面的例子中，当表单被提交，每个选中的文件名将被添加到 URL 参数中`?file=file1.txt&file=file2.txt`

## `accept`（限制可用文件类型）： ##

`accept` 属性：可以直接打开系统文件目录。当元素的 `type` 属性的值是 `file`，该属性表明服务器端可接受的文件类型，其它文件类型会将被忽略。

如果希望用户上传指定、类型的文件, 可以使用 `input` 的 `accept` 属性。  
![在这里插入图片描述][20200818153255901.png]  
该属性的值可以是一个，也可以说由逗号分割开的多个文件类型：

包括，以 `.` 开始的文件扩展名。（例如："`.jpg,.png,.doc`"）

或者，是一个有效的 `MIME` 类型，可以不需要扩展名，如下：

`audio/*` 表示所有音频文件 HTML5（支持）

`video/*` 表示视频文件 HTML5（支持）

`image/*` 表示图片文件 HTML5（支持）

支持逗号分隔的 `MIME` 类型字符串，写可以写成如下的方式：

`accept="image/png"` 或者 `accept=".png"` ，只接受 `png` 图片。

`accept="image/png, image/jpeg"` 或者 `accept=".png, .jpg, .jpeg"` ，接受 `PNG` 和 `JPEG` 文件。

`accept="image/*"` ，接受任何图片文件类型。

`accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"`，接受任何 `MS Doc` 文件类型。

实例：

<form>
      <div>
        <label for="profile_pic">Choose file to upload</label>
        <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png">
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>

`accept` 属性并不会验证选中文件的类型，只是为开发者提供了一种引导用户做出期望行为的方式，用户还是有办法绕过浏览器的限制。

因此，在服务器端进行文件类型验证还是很有必要的。

## `multiple`（多选）： ##

`multiple` 属性：当用户所在的平台允许使用 `Shift` 或者 `Contro`键时，用户可以选择多个文件。

如果不希望多选，可以直接忽略 `multiple` 属性。

## `required`（必填）：HTML5（支持） ##

`required` 属性：指定用户在提交表单之前必须保证该元素值不为空。当 `type` 属性是 `hidden，image` 或者按钮类型（`submit，reset，button`）时不可使用。

`:optional` 和 `:required` CSS 伪元素的样式将可以被该字段应用作外观。

## `capture`（调用设备媒体）： ##

`capture` 属性：在`webapp`上使用 `input` 的 `file` 属性，指定 `capture` 属性可以调用系统默认相机、摄像和录音功能。

`capture`表示，可以捕获到系统默认设备的媒体信息，如下：

`capture="camera"` 相机  
`capture="camcorder"` 摄像机  
`capture="microphone"` 录音

实例：

通过 `capture="camera"` 属性的拓展，可以实现相机的效果：利用JS调用电脑摄像头实现拍照效果

![在这里插入图片描述][20200820152258790.png]

[20200818153230786.png]: /images/20210704/432c4b17d530440484818b162183ab5e.png
[20200818153255901.png]: /images/20210704/63f960443e24413eb858345d9a16e667.png
[20200820152258790.png]: /images/20210704/d614e1beb07a4c67a8d427f37c535169.png