input文件上传的一些技巧

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

1、不做限制

代码如下：

<input type="file">

点击之后显示：

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方法其实说到底也只是一种建议，可以帮助我们快速在一个文件夹中的筛选出符合条件的文件，但是我们仍然可以通过点击上述图片右下角然后点击全部文件，这样其它类型的文件也可以选择了。