[郑州|结业弟子]JS-王庚龙|2021年06月17日的日报-技能树.IT修真院

发表于： 2021-06-17 21:26:05

0 1878

今天完成的事情：NG-ZORRO 组件库的了解；创建一个上传组件，了解上传

明天计划的事情：使用NG-ZORRO 组件库引入日历部件；搞上传控件，用接口上传图片文件到后端；

遇到的问题：NG-ZORRO 组件库具体使用还在搞；

收获：

使用 type="file" 的 <input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。

HTML：
<label for="avatar">Choose a profile picture:</label>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

css：
label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
    margin: .4rem 0;
}
值：

文件 input 的 value 属性包括了一个 DOMString，表示已选择文件的路径。如果用户选择了多个文件，则 value 表示他们选择的文件列表中的第一个文件。可以使用 input 的 HTMLInputElement.files 属性标识其他文件。

除了被所有 <input> 元素共享的公共属性，file 类型的 input 还支持下列属性：

属性	说明
accept	一个或多个 unique file type specifiers 描述允许的文件类型
capture	捕获图像或视频数据的源
files	FileList 列出了已选择的文件
multiple	布尔值，如果出现，则表示用户可以选择多个文件

accept：
accept (en-US) 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的唯一文件类型说明符列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。

例如，有许多方法可以识别 Microsoft Word 文件，所以接受 Word 文件的站点可以使用一个<input>：

<input type="file" id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

capture：

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

files：

FileList 对象每个已选择的文件。如果 multiple 属性没有指定，则这个列表只有一个成员。

multiple：

当指定布尔类型属性 multiple (en-US), 文件 input 允许用户选择多个文件。

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

一个以英文句号（"."）开头的合法的不区分大小写的文件名扩展名。例如： .jpg，.pdf 或 .doc。
一个不带扩展名的 MIME 类型字符串。
字符串 audio/*，表示“任何音频文件”
字符串 video/*，表示 “任何视频文件”
字符串 image/*，表示 “任何图片文件”
accept 属性的值是一个包含一个或多个（用逗号分隔）这种唯一文件类型说明符的字符串。例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件，例：

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

文件输入：

<form method="post" enctype="multipart/form-data">
    <div>
        <label for="file">Choose file to upload</label>
        <input type="file" id="file" name="file" multiple>
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>