input file 上传文件类型大小检查

Posted 2020-06-10

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

html 代码：

注意 accept 属性的用法

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

JS代码：

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

本文出自 “10919421” 博客，请务必保留此出处http://10929421.blog.51cto.com/10919421/1739629