你不知道的<input type="file">的小秘密
时间:2021-08-08
本文章向大家介绍你不知道的<input type="file">的小秘密,主要包括你不知道的<input type="file">的小秘密使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
限制file上传类型
很多时候,我们都需要使用
<input type="file">
进行文件上传。
在上传的时候,我们需要对文件类型进行限制。
如果上传图片的时候。
用户只能够限制用户上传
.jpeg, .png, .gif, .bmp, .jpg, .webp
图片类型说明,特别是webp
1、jpg(jpeg):这是一种可以高度保留图片色彩信息的格式
2、png:该类型的图片可以实现透明
3、gif:图片所占体积小,可以实现动图
4、webp是一种支持有损压缩和无损压缩的图片文件格式
我想给大家分享一下webp这一种图片格式; webp
可能有些小伙伴是第一次看见这种格式
webp(发音:weppy)是由谷歌于2010年推出的新一代图片格式,
它同时提供了有损压缩与无损压缩(可逆压缩);
我们使用webp 图片优势:
它具有更优的图像数据压缩算法,能带来更小的图片体积;
拥有肉眼识别无差异的图像质量;
具备了无损和有损的压缩模式。
因为可以进行大幅度的压缩,向京东、淘宝都是大量使用这种格式的图片
accept 属性的使用
<template>
<div>
<input type="file" title="" accept=".jpeg,.png, .gif,.bmp,.jpg">
</div>
</template>
我们可以发现用户只能够选择我们规定的图片类型了
但是细心的小伙伴会发现
当我们选择[所有文件的时候]我们限制的文件类型就失效了
这个时候就很尴尬了。
经过我查阅文档,
并没有很好的办法去处理用户不去选择[所有文件的时候]
这个时候我们还得使用js去检测用户上传的文件类型
检测优化上传的文件类型
<template>
<div>
<input type="file" @change="funHander($event)"
accept=".jpeg,.png, .gif,.bmp,.jpg">
</div>
</template>
<script>
export default {
setup () {
function funHander(e){
let fileName=e.target.files[0].name;
console.log('文件上传的名称',fileName);
// pop() 方法用于删除并返回数组的最后一个元素
// 获取文件的后缀需要注意这样的文件类型 xxx.aaa.aaa.aaa.aaa.aa
// 这样的文件名称必须获取最后一个.[点]结束的,才能精确知道该文件的类型
let fileType=fileName.split(".").pop();
console.log( '文件类型',fileType)
let arr=['jpeg','png','gif','bmp','jpg'];
// 如果我们可以查找到对应文件类型,
// 说明用户选择正确[true],否者错误[false]
let typeRight=arr.indexOf(fileType)==-1 ? false :true;
if(!typeRight){
alert('文件类型错误,请上传jpeg,png,gif,bmp,jpg')
}
}
return {funHander}
}
}
</script>
这样我们就可以很好的去解决用户选择的文件类型了。
用户上传正确就可以上传点击上传按钮,
否者就清空用户上传的文件内容,并提示用户
实现上面的功能
<template>
<div>
<input type="file" @change="funHander($event)"
ref="fileinput" accept=".jpeg,.png, .gif,.bmp,.jpg">
<button> 上传</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup () {
let fileinput=ref();
function funHander(e){
let fileName=e.target.files[0].name;
console.log('文件上传的名称',fileName);
// pop() 方法用于删除并返回数组的最后一个元素
// 获取文件的后缀需要注意这样的文件类型 xxx.aaa.aaa.aaa.aaa.aa
// 这样的文件名称必须获取最后一个.[点]结束的,才能精确知道该文件的类型
let fileType=fileName.split(".").pop();
console.log( '文件类型',fileType)
let arr=['jpeg','png','gif','bmp','jpg'];
// 如果我们可以查找到对应文件类型,
// 说明用户选择正确[true],否者错误[false]
let typeRight=arr.indexOf(fileType)==-1 ? false :true;
if(!typeRight){
alert('文件类型错误,请上传jpeg,png,gif,bmp,jpg')
console.log(fileinput )
fileinput.value='';//清空文件
}
}
return {funHander,fileinput}
}
}
</script>
作者:明月人倚楼
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
原文地址:https://www.cnblogs.com/IwishIcould/p/15116490.html
- 【Go 语言社区】go 学习中遇到一些语法问题
- Elasticsearch全文检索实战小结——复盘我带的第二个项目
- 当12C PDB遇上JDBC (r10笔记第59天)
- 微信公众平台开发获取用户基本信息--转
- Elasticsearch检索分类深入详解—基础篇
- 通过Java程序测试数据库连接信息 (r10笔记第64天)
- GoldenGate安装简记(r10笔记第78天)
- 【Go 语言社区】各种变量的声明
- 【Go 语言社区】Golang 高效字符串拼接
- 实战 | Elasticsearch实现类Google高级检索
- Golang中time包用法--转
- 干货 | Elasticsearch 集群健康值红色终极解决方案
- Go语言interface的value.(type)使用小技巧-转
- 干货 | Elasticsearch5.X Mapping万能模板
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter框架分析(三)-- Widget,Element和RenderObject
- 傅里叶变换的图像应用--学好了用处大~
- Flutter框架分析(四)-- Flutter框架的运行
- R海拾遗-流程图prismadiagramR
- R海拾遗-单项重复测量方差分析
- R海拾遗-双因素重复测量方差分析
- 小白秒变大神--windows窗口+装B神器大全 两部曲
- R海拾遗-三因素重复
- 推荐一种简单的在Flutter中分离View与Model的方法
- R海拾遗-tidyverse
- Flutter Hooks 使用及原理
- ggplot2_总纲
- 聊聊怎样学习Binder
- ggplot2_散点图
- 你真的理解Binder“一次拷贝“吗?