首页 > 其他分享 >上传相关必备知识点 `<input type="file">`

上传相关必备知识点 `<input type="file">`

时间:2023-03-02 17:26:00浏览次数:35  
标签:files 知识点 文件 必备 value 字符串 input 上传 属性

上传相关 知识点 <input type="file">

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

|
-|-
值 | value表示已选择文件的路径字符串
事件 | change 和 input
支持的公共属性 | required
附加属性 | accept、capture 和 multiple
IDL 属性 | files 和 value
DOM接口 | HTMLInputElement
方法 | select()

一、值

value为选择文件的路径,格式为字符串,默认为空串"",使用.value表示选中文件列表中的第一个。如果是开启multiple属性选择多个文件,可以通过ELEMENT节点.files来访问FileList

为了安全,值的路径显示为C:\fakepath\,而非真实路径

二、事件

当值发生改变时,触发这两个事件。input事件:输输入框内容发生改变时就会触发;change事件:输入框内容发生改变,并且输入框失去焦点时触发

三、附加属性

除了input公共方法,

1.accept

属性是一个字符串,它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的唯一文件类型说明符列表(见下面)。

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

2.capture

属性是一个字符串,如果 accept (en-US) 属性指出了 input 是图片或者视频类型,则它指定了使用哪个摄像头去获取这些数据。不作展开

PS:唯一文件类型说明符列表

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

accept 属性的值是包含一个或多个(用逗号分隔)唯一文件类型说明符的字符串。例如,一个文件选择器需要能被表示成一张图片的内容,包括标准的图片格式和 PDF 文件,大概是这样的:

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

3.multiple

开启后允许用户选择多个文件

四、IDL 属性(files 和 value)

1.files

被选择的文件以 HTMLInputElement.files 属性返回,它是包含一系列 File 对象的 FileList 对象。FileList是一个类数组对象,每个成员都是一个 File 实例。包含

所有现代浏览器中读写 HTMLInputElement.files 的值,不存在兼容性问题。

属性 描述
name 文件名。
lastModified 一个数字,指定文件最后一次修改的日期和时间,以Unix时间戳表示。
lastModifiedDate 已弃用 一个 Date 对象,表示文件最后一次修改的日期和时间。这被弃用,并且不应使用。使用 lastModified 作为替代。但是目前仍能访问
size 以字节数为单位的文件大小。
type 文件的 MIME 类型。
webkitRelativePath 非标准 一个字符串,指定了相对于在目录选择器中选择的基本目录的文件路径(即,一个设置了 webkitdirectory 属性的 file 选择器)。这是非标准的,应该谨慎使用。

2.value 同上面的 “值”

标签:files,知识点,文件,必备,value,字符串,input,上传,属性
From: https://www.cnblogs.com/wanglei1900/p/17172488.html

相关文章

  • Web上传文件夹的三种解决方案
    ​ 最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的......
  • 关于HTTP/3的小知识点
    客户端用TCP发送了三个包,但服务器所在的操作系统只收到了后两个包,第一个包丢了。那么内核里的TCP协议栈就只能把已经收到的包暂存起来,“停下”等着客户端重传那个丢失的......
  • cowtransfer(奶牛快传)自动上传文件脚本—流程分析
    cowtransfer(奶牛快传)自动上传文件脚本—流程分析序言:距离上传发文也有几天了,这几天也是将这个脚本优化了一下。如果还不清楚这个脚本的效果是怎么样的小伙伴可以......
  • Java上传二进制(multipart/form-data)_Demo
    这里做个记录,通过此次问题的解决,弄清POST同时传文件及参数时,底层到底是怎么组成,文件流及参数是怎么分隔组成,及分隔符如何写入流。好,废话不多说,直接上代码,此代码配置好自己......
  • SpringCloud文件夹上传解决方案
    ​ 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对Http协议较模糊,故这次采用渐进的方式来学习文件上传的......
  • mysql知识点一
    1.mysql中造成索引失效的原因有哪些?如何分析和解决?原因:1.like以通配符%开头索引失效通常用的索引数据结构是B+树,而索引是有序排列的优化:一种是使......
  • 局域网文件夹上传解决方案
    ​ 文件夹数据库处理逻辑public class DbFolder{    JSONObjectroot;       public DbFolder()    {        this.root= new JSON......
  • 知识点整理——最小环
    前言近日刷图论题遇到了多道求解最小环的例题,由于方法众多,用法不尽相同,数次被此所困扰。在互联网上寻找良久,却没能发现什么系统性的整理,所以便有了此文。求解此类问题:......
  • 基于vue3+el-upload 获取视频第一帧截图并上传服务器
    //视频上传成功consthandleVideoSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{  if(response.status=='500005'){   detailInfo.v......
  • 搭建自己的harbor仓库并上传和下载镜像
    1.1搭建harbor服务器[root@rocky8~]$cat/data/scripts/install_harbor.sh#!/bin/bashDOCKER_VERSION="20.10.10"UBUNTU_DOCKER_VERSION="5:${DOCKER_VERSION}~3......