<input type=file>文件上传
大家好,又见面了,我是你们的朋友全栈君。
<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>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154463.html原文链接:https://javaforall.cn
相关文章
- linux移动文件夹到另一个文件夹怎么移动_linux文件拷贝
- Flutter实现文件上传华为对象存储(OBS)
- vue中使用input file上传文件
- Weblogic任意文件上传漏洞(CVE-2019-2618)
- git 本地文件上传 github || gitee
- 【lrzsz】安装lrzsz工具实现Linux和Windows系统之间文件便捷上传与下载
- 扩容C盘后盘符不见的文件找回方法
- DVWA漏洞演练平台 - 文件上传
- django 文件上传
- el-upload上传文件
- lua文件写入
- 利用HttpClient进行http文件上传详解编程语言
- Linux 精准查看文件内容(linux查看文件内容)
- Linux环境下本地文件快速上传指南(linux本地上传文件)
- 掌握 Linux 文件隐藏的妙招(linux文件隐藏命令)
- MySQL导入CSV文件的三种方法(mysql导入cvs)
- Linux快速修改文件路径的简便方法(linux修改文件路径)
- 「linux 文件匹配」:解密高效、快捷的文件搜索技巧(linux文件匹配)
- 文件oracle数据库如何上传服务器端文件(oracle上传服务器端)
- 夹Redis自动备份保障数据安全的文件夹(redis自动备份的文件)
- Javascript&DHTML实例编程(教程)(三)初级实例篇1—上传文件控件实例
- asp.netjavascript文件无刷新上传实例代码
- php文件上传代码(限制jpg文件)
- asp.nethtml控件的File控件实现多文件上传实例分享
- common-upload上传文件功能封装类分享
- php设置允许大文件上传示例代码
- nginx不支持apkipa文件下载的设置方法
- Thinkphp多文件上传实现方法
- PHP文件上传判断file是否己选择上传文件的方法