你不知道的<input type="file">的小秘密

2021/8/8 23:37:32

本文主要是介绍你不知道的<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>


这篇关于你不知道的<input type="file">的小秘密的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程