文章目录
博客内容
— input 的全部类型
— input 的accept、multiple 属性介绍
— input 事件监听
— 更改input文件上传css样式
— 上传图片文件 获取图片地址
— 上传file文件后彻底清空上传文件
— 各种文件类型
介绍
input 全部类型
input 框的类型到底有多少种呢,零零散散算下来有二十多种
总述
常用的并且能为大多数浏览器所识别的类型大概有:text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。
另外还有一些类型:tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。
text类型 文本框
<input type="text"></input>
注意:当input框没有给类型的时候,默认text文本框
password类型 密码框
<input type="password"></input>
number类型 数字框
<input type="number"></input>
button类型 按钮
<input type="button"></input>
reset类型 重置按钮
<input type="reset"></input>
注意:reset类型 一般用于form表单中
submit类型 提交按钮
<input type="submit"></input>
注意:submit类型 一般用于form表单中
hidden类型 隐藏
<input type="hidden"></input>
注意:hidden类型会将input隐藏,所以什么都看不到,而且被隐藏的input框也不会占用空间。
radio类型 单选按钮
<input type="radio"></input>
checkbox类型 复选按钮
<input type="checkbox"></input>
image类型 图片
<input type="image" src="../../image/one.png"></input>
color类型 颜色
<input type="color"></input>
range类型 滑动条
<input type="range"></input>
date类型 日期
<input type="date"></input>
month类型 月份
<input type="month"></input>
week类型 周
<input type="week"></input>
time类型 时间
<input type="time"></input>
datetime类型 时间、日、月、年(UTC时间)
<input type="datetime"></input>
注意:火狐、360浏览器都对datetime不支持,会按照text类型处理。
datetime-local类型 时间、日、月、年(本地时间)
<input type="datetime-local"></input>
tel类型 电话
<input type="tel"></input>
注意:这个类型我认为没有实际用处
email类型 邮箱
<input type="email"></input>
注意:火狐对email类型有校验,360浏览器无校验。
=======
好了接下来是今天的重点了
file 类型
<input type="file" accept multiple></input>
< input > type 类型为 file 的 input 元素,使得用户可以选择一个或多个元素以提交表单的方式传到服务器上,或者通过Javascript 的 file Api对文件进行操作。
属性
accept属性
该属性表明了服务器端可接受的文件类型,可以限制你手机选择相关的文件,如果限制多个,可以用逗号分割。
accept 属性接受一个逗号分隔的 MIME 类型字符串, 如:
- accept=“image/png” 或 accept=".png" — 只接受 png 图片.
- accept=“image/png, image/jpeg” 或 accept=".png, .jpg, .jpeg" — PNG/JPEG 文件.
- accept=“image/*” — 接受任何图片文件类型.
- accept=“audio/*” — 接受任何音频文件类型.
- accept=“video/*” — 接受任何音频视频文件类型.
- accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何 MS Doc 文件类型.
multiple属性
multiple属性代表是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
<input id="fileId2" type="file" multiple="multiple" name="file" />
事件监听
在 input 元素上监听 change 事件就能获取到用户上传的文件信息,包括文件名、上传时间、文件大小等等,通过 FileReader 我们还可以将图片文件转换成 base64 编码格式实现预览图片功能。
在 change 事件监听的函数内,event.target.files 就是用户上传的图片信息。
<input style="display: none"
id="file" ref="files"
type="file"
@change="uploadData(e)"
accept=".doc,.docx,.pdf,.ai,.psd"
multiple="multiple" />
// 获取文件 这里是使用的 vue3.0 语法
const uploadData = (e) => {
var e = window.event || e // change事件获取到的数据
if (e.target.files[0].size > 500 * 1024 * 1024) { // 限制文件上传大小
ElMessage.error('上传单个文件大小不能超过 500M!')
} else {
state.ruleForm.documentFile = e.target.files[0] // 文件赋值
}
}
css样式更改
原生的input file 实在是不好看,外加不好修改 CSS。所以用来其他的方式。
第一种:vue3.0的写法 把 input file 样式设置display:none; 隐藏, 或者 设置透明度 opacity设置为0,然后用一个好看的按钮代替点击,之后,在input中设置ref 用来获取数据。 js中获取ref然后链接设置样式的点击事件
html代码
<el-button @click="goFile" size="small" type="primary">
<i class="el-icon-upload2"></i>上传文件
</el-button>
<input style="display: none"
id="file" ref="files"
type="file"
@change="uploadData(e)"
accept=".doc,.docx,.pdf,.ai,.psd"
multiple="multiple" />
js 代码
// 先在vue 中获取 ref
import { toRefs,ref } from 'vue'
export default {
name: 'FileData',
components: {},
setup () {
const state = reactive({
loading: false,
pageInfo: {
page: 1,
rows: 10,
total: 0,
}
})
const files = ref(null) // 获取ref 这里对接html的ref
// 这里对接html 代码 的点击事件
const goFile = () => {
files.value.click()
}
// 最后return 出去
return {
...toRefs(state),
goFile,
files,
}
效果
第二种方法:vue2.0 写法,vue2.0很多种写法,我举例一种:使用 label元素 与 input file控件关联,然后隐藏 input。也是一样的。只不过不用调用方法了。
<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="display:none;"></form>
上传图片文件,获取图片地址
html代码
<input style="display: none"
id="fileImg" ref="filesImg" type="file"
@change="uploadImg(e)"
accept=".jpg,.png,.gif,.bmp"
multiple="multiple" />
js代码
// 获取图片
const uploadImg = (e) => {
var e = window.event || e // change事件获取到的数据
if (e.target.files[0].size > 2 * 1024 * 1024) { // 限制上传图片文件大小
ElMessage.error('上传单个封面大小不能超过 2M!')
} else {
state.ruleForm.coverFile = e.target.files[0]
// 获取图片地址
var file = e.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (result) {
state.coverFile = result.target.result // 图片地址 Base64 格式的 可预览
}
}
}
input type file上传文件之后清空内容
上次写过如何上传文件,上传成功之后,会出现一些问题。
当我打开上传的文件,但是没有点击上传,然后关闭弹窗,接着继续上传刚才的那个文件。为了满足产品组的要求,我们一般都会把样式进行一定的覆盖。
但这就会出现一定的问题。按照上面说的那种情况,当我再次打开之后覆盖样式的内容为空。
其实刚开始是百思不得其解的,最后想了一下,应该是file文件内容没有清空的原因造成的。
上网查各种清空的方法。
都是直接给获取到的files文件的value 赋值为空,但是这种方式治标不治本,不能彻底清理文件达到解决问题的方法
挣扎了两个小时解决了文件彻底清理的方法,就是外部加一个form表单,然后清空form表单里面的内容。
如上图一样,我给input标签外面增加一个form标签,id为DataForm
我们产品需求上传文件是在一个弹框里面的。
所以我每次打开弹框的时候,只需要清空一下该内容就行。
具体代码
document.getElementById('DataForm')&&document.getElementById('DataForm').reset();
各种文件的类型
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
期待三连!!!