前端限制上传文件的类型

Posted web喵神的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端限制上传文件的类型相关的知识，希望对你有一定的参考价值。

　　今天在工作中遇到一个需求，需要在上传文件的时候限制上传文件的类型，比如上传图片的就只能上传图片类型的文件。 现将自己在开发中的代码放到我的博客里，以备在以后的开发中再次遇到。就可以直接使用了。

　　这里就放一个小demo了。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>

<script type="text/javascript">
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    function fileChange(target,id) {
        var fileSize = 0;
        var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
        var filepath = target.value;
        var filemaxsize = 1024*2;//2M
        if(filepath){
            var isnext = false;
            var fileend = filepath.substring(filepath.indexOf("."));
            if(filetypes && filetypes.length>0){
                for(var i =0; i<filetypes.length;i++){
                    if(filetypes[i]==fileend){
                        isnext = true;
                        break;
                    }
                }
            }
            if(!isnext){
                alert("不接受此文件类型！");
                target.value ="";
                return false;
            }
        }else{
            return false;
        }
        if (isIE && !target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            if(!fileSystem.FileExists(filePath)){
                alert("附件不存在，请重新输入！");
                return false;
            }
            var file = fileSystem.GetFile (filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }

        var size = fileSize / 1024;
        if(size>filemaxsize){
            alert("附件大小不能大于"+filemaxsize/1024+"M！");
            target.value ="";
            return false;
        }
        if(size<=0){
            alert("附件大小不能为0M！");
            target.value ="";
            return false;
        }
    }
</script>

</body>
</html>

 

以上是关于前端限制上传文件的类型的主要内容，如果未能解决你的问题，请参考以下文章

Java web文件上传怎么限制文件类型

upload上传通关游戏

前端-接入层上传问题

前端——利用File signature精准校验文件类型

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

前端文件上传多种方式