前端限制上传文件的类型

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

  这里就放一个小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.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>

</body>
</html>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Django学习笔记之Cookie、Session和自定义分页

1285
来自专栏Youngxj

历史上的今天(百度百科)完整接口源码

3083
来自专栏葡萄城控件技术团队

Winform文件下载之WinINet

在C#中,除了webclient我们还可以使用一组WindowsAPI来完成下载任务。这就是Windows Internet,简称 WinINet。本文通过一个...

2068
来自专栏随心DevOps

[实战篇] Python 运维中使用并发

今天从大哥手里接了一个需求: 验证一下新的 Docker 镜像仓库(Docker Registry)是否迁移成功了 简单粗暴的方法就是拿到老仓库中的镜像列表(I...

41212
来自专栏Python绿色通道

Python爬虫准备:认识urllib/urllib2与requests

首先说明一下我的爬虫环境是基于py2.x的, 为什么用这个版本呢,因为py2.x的版本支持的多,而且一般会使用py2.x环境,基本在py3.x也没有太大问题,好...

982
来自专栏CSDN技术头条

一组 Redis 实际应用中的异常场景及其根因分析和解决方案

在上一场 Chat《基于 Redis 的分布式缓存实现方案及可靠性加固策略》中,我已经较为全面的介绍了 Redis 的原理和分布式缓存方案。如果只是从“会用”的...

2693
来自专栏difcareer的技术笔记

ELF中可以被修改又不影响执行的区域

看雪上这篇文章讲述了两种对so进行加固的方法:1. 分离section,对整个section进行加密。2.在.text section直接寻找目标函数并进行加密...

1034
来自专栏前端布道

HTML5离线应用与客户端存储

支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网的情况下仍然可以运行的应用。

1131
来自专栏Golang语言社区

【Go 语言社区】linux 下Go服务器部署(也同样适合C++等)

作为服务器开发人员,GO语言内网测试数据及调试肯定很简单,如果你在Windows下开发 直接编成EXE执行就可以,然后部署外网在打包成linux的执行文件(交...

3348
来自专栏安恒网络空间安全讲武堂

Python编写渗透工具学习笔记二 | 0x02利用FTP与web批量抓肉鸡

0x02利用FTP与web批量抓肉鸡 脚本要实现的目标和思路: 先尝试匿名登录ftp,当匿名登录失败时再尝试用用户/密码爆破登录,登录成功后,脚本会搜索ftp中...

1.4K7

扫码关注云+社区