input详解之文件上传

小菜鸟在摸鱼

MoXinXueWEB

14717人浏览 · 2022-07-11 19:29:48

MoXinXueWEB · 2022-07-11 19:29:48 发布

input 全部类型

常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

1、一般类型

<!-- text类型 文本框  默认text文本框 -->
<input type="text"></input>

<!-- password类型 密码框 -->
<input type="password"></input>

<!-- number类型 数字框 -->
<input type="number"></input>

<!-- button类型 按钮 -->
<input type="button"></input>

<!-- reset类型 重置按钮  一般用于form表单中 -->
<input type="reset"></input>

<!-- submit类型 提交按钮  一般用于form表单中 -->
<input type="submit"></input>

<!-- hidden类型 隐藏  会将input隐藏，所以什么都看不到，而且被隐藏的input框也不会占用空间 -->
<input type="hidden"></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="date"></input>

<!-- time类型 时间 -->
<input type="time"></input>

<!-- datetime类型 时间、日、月、年（UTC时间） 火狐、360浏览器都对datetime不支持，会按照text类型处理。 -->
<input type="datetime"></input>

<!-- datetime-local类型 时间、日、月、年（本地时间） -->
<input type="datetime-local"></input>

<!-- tel类型 电话  我认为没有实际用处 -->
<input type="tel"></input>

<!-- email类型 邮箱 火狐对email类型有校验，360浏览器无校验 -->
<input type="email"></input>

<!-- file 类型 文件 -->
<input type="file"></input>

2、file 类型文件

<input type="file" accept multiple></input>

2.1、属性

accept属性

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属性

代表是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

<input id="fileId2" type="file" multiple="multiple" name="file" />

2.2、事件监听

在 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) => {
            let 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]  // 文件赋值
            }
        }

2.3、css样式更改

第一种：vue3.0的写法把 input file 样式设置display:none; 隐藏, 或者设置透明度 opacity设置为0，然后用一个好看的按钮代替点击，之后，在input中设置ref 用来获取数据。 js中获取ref然后链接设置样式的点击事件

<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" />

// 先在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,
        }

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BxmFhiX-1657538836895)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220711190005915.png)]$

第二种方法：vue2.0 写法，vue2.0很多种写法，我举例一种：使用 label元素与 input file控件关联,然后隐藏 input。也是一样的。只不过不用调用方法了。

 <input style="display: none" 
 	id="fileImg" ref="filesImg" type="file" 
 	@change="uploadImg(e)" 
	accept=".jpg,.png,.gif,.bmp" 
	multiple="multiple" />

  // 获取图片
        const uploadImg = (e) => {
            let 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] 
                // 获取图片地址
                let file = e.target.files[0]
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (result) {
                    state.coverFile = result.target.result // 图片地址 Base64 格式的 可预览
                }
            }
        }

2.3、上传文件之后清空内容

获取到的files文件的value 赋值为空，但是这种方式不能彻底清理文件达到解决问题的方法，最后，外部加一个form表单，然后清空form表单里面的内容

<form id="dataForm">
       <input style="display: none" 
        id="file"
        ref="files"
        type="file" 
        @change="uploadData(e)" 
        accept=".jpg,.docx,.pdf,.ai,.psd,.png,.gif,.bmp" 
        multiple="multiple" />
    </form>

document.getElementById('DataForm')&&document.getElementById('DataForm').reset();

2.4、各种文件的类型

*.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