文章目录
博客内容介绍input 全部类型file 类型属性accept属性multiple属性事件监听css样式更改上传图片文件,获取图片地址input type file上传文件之后清空内容各种文件的类型博客内容
—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 中获取 refimport {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 *.dxfimage/vnd.dxf*.gif image/gif *.htm text/html *.html text/html *.jp2 image/jp2 *.jpe image/jpeg*.jpeg image/jpeg*.jpgimage/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 *.xlcapplication/vnd.ms-excel *.xlm application/vnd.ms-excel *.xls application/vnd.ms-excel *.xltapplication/vnd.ms-excel *.xlwapplication/vnd.ms-excel *.xml text/xml, application/xml *.zip aplication/zip *.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
期待三连!!!