input文件上传的一些技巧

1,229 阅读2分钟

前言

在我们日常的开发中,避免不了上传文件这个功能。很多时候还必须在文件上传前进行限制,比如下面的例子:


1、不做限制

代如下:

<input type="file">

点击input之后显示:


2、只能上传图片,并且指定格式为png

代码如下:

<input type="file"  accept="image/png" >
点击后显示:


好了,筛选完成。但是,这个accept中的是什么玩意?答案就是MIME。
MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
完整的MIME参考手册,点击这里

3、指定上传".apk"文件

算是解决了文件筛选的问题,可是在一个需求中,就有点离了谱了。需求如下:
两种不同的终端要分别限制长传上不同的类型的文件,终端类型一只能上传".zip"文件,终端类型二只能上传".apk"。
看到这里,有朋友可能就会问,这有什么离谱的啊,去MIME手册查查看就完事儿了。我也是这么想的,然后就去参考手册翻,发现里面居然没有".apk"的MIME类型。这怎么办?

办法总是有的,首先,我们想到的是,获取文件的名称,利用文件的扩展名来进行筛选:

<!-- html代码 -->
<input type="file"  id="fileDemo"}/> 
<input type="botton" value="确定"  id="fileBtn" onclick="file();"/>

// js代码
function file(){
    const fileName = document.getElementById('fileField').files[0].name;
    const tempArr = fileName.split('.');
    const suffix = tempArr[tempArr.length - 1];
    console.log(suffix); //apk
}

好了,现在我们可以获取到文件的扩展名,然后判断相关文件是否符合上传的要求,在上传到服务器之前给出提示信息,使之上传符合条件的文件。但是总觉的这样不统一,也不是很友好。所以再想想办法,毕竟".apk"文件是这么的常见,没有这个的MIME类型有点说不过去吧。到这里,万能的网友派上用场了~

扩展名中填写“.apk”。MIME类型中填写apk的MIME类application/vnd.android.package-archive

赶紧加上试试:

<input type="file" accept="application/vnd.android.package-archive"  id="fileDemo" />


结果符合了我们的预期,oyeah~

4、需要注意的

当然,我们的扩展名验证也要加上。而且,上传文件的类型必须在服务器上进行验证!!!上述的accept方法其实说到底也只是一种建议,可以帮助我们快速在一个文件夹中的筛选出符合条件的文件,但是我们仍然可以通过点击上述图片右下角然后点击全部文件,这样其它类型的文件也可以选择了。