作为上传文件的基本元素, input file 被广为应用。而对文件类型、大小的限制是常见的要求。可以通过如下办法,在前端进行原生的文件检查:

html 代码:

注意 accept 属性的用法

<input type="file" name="icon" onchange="checkFile(this)" accept="p_w_picpath/jpeg,p_w_picpath/x-png,p_w_picpath/gif" />

JS代码:

var checkFile = function(o) {
    if (o.files.length <= 0) return;    //点击取消时,直接退出
    var f = o.files[0];
    
    //检查类型、大小等信息,出错则退出,文件不会上传
    if (f.type != 'p_w_picpath/jpeg' || f.size > 100*1024) {
        o.value = '';                   //保证重复选择某个文件时触发 onchange 事件
        alert('错误提示');
        return;
    }
    //下面是上传代码
    //为了安全,服务器端一般也要有检查机制,那就不是本文要讨论的了
}