<input type=file>文件上传

<input type=file>文件上传<input>type类型为file时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 JavaScript 的FileAPI对文件

大家好,又见面了,我是你们的朋友全栈君。

<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 JavaScript 的 File API 对文件进行操作 .

 

常用input属性:

accept:指示file类型,没有时表示不限制类型,填入格式后选择文件时只能看见被允许的文件

accept=”image/png” 或 accept=”.png” 表示只接受 png 图片. 

accept=”image/png, image/jpeg” 或 accept=”.png, .jpg, .jpeg” 表示接受 PNG/JPEG 文件. 

accept=”image/*” 接受任何图片文件类型. audio/* 表示音频文件video/* 表示视频文件

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

accept 属性并不会验证选中文件的类型. 他只是为开发者提供了一种引导用户做出期望行为的方式而已, 用户还是有办法绕过浏览器的限制。因此, 在服务器端进行文件类型验证是必不可少的。

multiple:Boolean ,指示用户能否多个输入,type为email或file时生效

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

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

 

事件:

change事件

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

示例

<template> <div> <input type="file" id="upload" multiple @change="upload"></input> </div> </template> <script> export default { methods: { upload(e) { // 获取文件信息 // 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表(你也可以像列表一样操作它). // 每个 File 对象包含了下列信息: // name: 文件名.    // lastModified: UNIX timestamp 形式的最后修改时间.    // lastModifiedDate: Date 形式的最后修改时间.    // size: 文件的字节大小.    // type: 文件类型. // let files=document.getElementById(‘upload‘).files // 获取单个文件信息 let file = e.target.files[0] // 文件信息获取后根据file.type判断类型,根据file.size限制判断大小,最后上传,建议上传单独一个写button const formdata = new FormData() formdata.append(‘file‘, file) // 调接口,data为formdata } } }; </script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154463.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Python生成随机数矩阵_Python生成50个随机数

    Python生成随机数矩阵_Python生成50个随机数生成随机数使用random模块random.random()用于随机生成一个0到1的浮点数random.randint(start,stop)随机生成[start,stop]区间内的整数代码示例:importrandomprint(random.random())print(random.randint(2,5))输出结果:0.281138941702427152…

  • Access是什么?

    Access是什么?

  • kafka零拷贝原理_通俗易解中的解是什么意思

    kafka零拷贝原理_通俗易解中的解是什么意思Kafka之所以那么快,其中一个很大的原因就是零拷贝(Zero-copy)技术,零拷贝不是kafka的专利,而是操作系统的升级,又比如Netty,也用到了零拷贝。下面我就画图讲解零拷贝,如果对你有帮助请点个赞支持。传统IOkafka的数据是要落入磁盘的,那么必然牵扯到磁盘的IO,传统磁盘IO又叫缓存IO,效率是很低的,那么为什么效率低呢?我们先来粗略讲讲操作系统的知识。用户空间以及内核空间的概念:我们知道现在操作系统都是采用虚拟存储器。那么对32位操作系统而言,它的寻址空间(虚拟存储空间)

  • lte频谱带宽_lte信道带宽可以配置为

    lte频谱带宽_lte信道带宽可以配置为1.频带(Band)所谓频带,指代的是一个频率的范围或者频谱的宽度,即无线解码器的最低工作频率至最高工作频率之间的范围,单位是Hz。为了方便起见,在LTE中,使用数字1-43来表示不同的频带(36101-V10.21.0版本协议),从而指代不同的频率范围。协议36101规定了目前LTE所有的频带、该频带的频率范围和LTE制式,如下图所示。需要注意的是,频带1-32的上下行频率范围是不重叠的,即上行

    2022年10月11日
  • SQL Server基本操作练习「建议收藏」

    SQL Server基本操作练习「建议收藏」代码实现:use test_0425goselect *from student– 查专业是什么学的select *from studentwhere stspecialty like’%学’– 查分72-87的 并且 专业是什么文的select *from studentwhere stscore like ‘[7-8][2-7]’ and stspecialty …

  • js根据经纬度计算距离

    js根据经纬度计算距离varEARTH_RADIUS=6378137.0;//单位MvarPI=Math.PI;functiongetRad(d){returnd*PI/180.0;}/***caculatethegreatcircledistance*@param…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号