JavaScript 编写简单的 html input标签提交文件验证

这里不会介绍如何传输文件如果您想了解文件是如何传输到服务器的
请进入传送门【Ajax实现简单图片文件异步上传并显示】

让用户提交文件永远是一件危险的事情，而提交之前的验证就显得必不可少了，而如果在文件提交到服务器端再验证，那么不仅具有一定的危险性，而且浪费了服务器宝贵的带宽来传输文件，使用JavaScript，在用户（的浏览器）提交文件之前，就验证文件的正确性，可以比较好的规避上述问题

html <input type="file"> 标签

这个标签可以获得用户提交的文件的各种属性，比如文件名，文件大小，这也是判断的核心

使用短短几句，可以创建一个文件提交页面

<input type="file" id="userfile">
<button id="btn">点我提交</button>

提交判断

1. 空提交判断

我们可以使用dom的方式，用document.getElementById()方法来获取input标签对象，而这个input对象具有一个 files 的属性，是用户上传的文件的数组

由于这次测试只提交一个文件，所以我们用.files[0]这个语句可以获取到单个文件对象（因为数组元素只有一个）并且判断对象是否为空，即用户是否选择了文件

 // 获取文件对象
var userfile = document.getElementById("userfile").files[0];
if(userfile == null) {
   
    alert("文件不能为空");
    return;
} 

我们在 button 按钮的 onclick 函数里面加上上面的语句，即可判断是否是空提交了