input文件上传限制(类型，大小)

转载已于 2022-04-29 09:28:35 修改 · 7.8k 阅读

12 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/congfeicong/p/11804288.html

文章标签：

#javascript #开发语言 #ecmascript

于 2022-03-18 09:14:34 首次发布

功能实现同时被 2 个专栏收录

12 篇文章

订阅专栏

10 篇文章

订阅专栏

该博客介绍了一种前端文件上传时限制文件类型和大小的方法。通过HTML的accept属性设置允许的文件类型，并使用JavaScript进行进一步的判断，确保用户只能选择如.xls, .doc, .txt, .pdf等指定类型的文件。同时，代码还检查了文件大小，限制在2MB以内，超出限制将提示用户。这个解决方案有助于提高网站的安全性和用户体验。

1、限制上传文件类型解决办法是可以给它添加一个accept属性，比如：

<input id="File1" type="file"  accept=".xls,.doc,.txt,.pdf"  />

2、但是选择文件的时候还是可以选择其他类型的，需要用代码判断
在这里插入图片描述
3、js判断

<input type="file" name="contractFileName" style="width: 500px;" οnchange="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.lastIndexOf("."));
            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>