博客内容

— 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

期待三连！！！