文章目录

博客内容
介绍
- 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 中获取 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

期待三连！！！

input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）相关推荐

File Struct 上传JPG格式图片变成tmp 服务器上传文件名字随机起
今天在写ssh框架中上传图片的代码,解决了一部分,然后卡在了图片上传之后的文件名不一致,就像随机取的.从我上传的jpg格式变成了tmp. 格式是不对了,但是文件内容并没有发生变化,说明文件是上传成功了 ...
AWS 获取AccessKey和密钥，上传文件到s3
1,获取Accesskey和secret 打开AWS的网页,右上角那里,我的账户下面,切换角色上面,我的安全凭证 ,点击进去就会得到如下页面,然后创建访问密钥,就可以了,保存起来,或者下载下来,因为 ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
php文件上传css,CSS_文件上传input file简便美化方案(css)，文件上传input在各个浏览器里 - phpStudy...
文件上传input file简便美化方案(css) 文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化 ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
css vue 选项卡_vuejs实现标签选项卡动态更改css样式的方法
html {{item.name}} js var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js&q ...
jq.html()改变颜色,jquery怎么更改css样式？
使用jQuery可以更改CSS的样式,例如更改颜色或在执行操作时更改元素的大小,本篇文章我们就来给大家介绍使用jQuery更改CSS样式的具体方法,下面来看具体的内容. 在jQuery中,可以使用CS ...
php获取input file路径,JavaScript_JS获取input file绝对路径的方法(推荐)，最近因需要上传文件到oracle blo - phpStudy...
JS获取input file绝对路径的方法(推荐) 最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法, ...
php获取上传文件路径 fakepath,JavaScript_js获取上传文件的绝对路径实现方法，在html中input type=file - phpStudy...
js获取上传文件的绝对路径实现方法在html中 function upload() { var filename = document.getElementById("importFile ...

input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）