前端限制上传文件的类型

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

  这里就放一个小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>
时间: 2024-10-24 11:08:56

前端限制上传文件的类型的相关文章

MIME类型-服务端验证上传文件的类型

MIME的作用 : 使客户端软件,区分不同种类的数据,例如web浏览器就是通过MIME类型来判断文件是GIF图片,还是可打印的PostScript文件. web服务器使用MIME来说明发送数据的种类, web客户端使用MIME来说明希望接收到的数据种类. Tomcat的安装目录/conf/web.xml 中就定义了大量MIME类型 ,你可也去看一下. 最近在做用表单上传文件,想在服务端验证上传文件的类型,只允许上传GIF,JPG,ZIP, 我们有两种方法, 第一:检查文件的扩展名, 第二:检查文

phpcms前端页面上传文件

PHPCMS其实有一个叫做附件的模块,上传用的就是这个东西,现在我们来看一下对应的文件:phpcms\modules\attachment \attachments.php就是这个文件,大概在29行上(我用的PHPCMS版本号是Phpcms V9.5.8 Release 20140929)有下面一个方法: public function upload() { $grouplist = getcache('grouplist','member'); //获取缓存中身份分组的列表 if($this-

前端js上传文件 到后端接收文件

下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> <!-- // action="fileupload"对应web.xml中<se

前端实现上传文件夹与文件夹名称的获取

最近再做一个标注类的项目,需求呢就是上传文件夹(内有n张图像),然后在系统中进行标注工作.前段时间已经把标注部分的交互写好了,原以为文件夹上传很好弄,结果费了半天的劲,网上有一些介绍,但是都不是太详细. 根据上搜索结果调研了一下,ie基本是实现不了文件夹的上传,因为是新装的系统,镜像里边没有ie,所以没法测试,按照网上的说法,ie中只有Edge这个浏览器版本可以实现,其他的主流浏览器我都测试了一下,windows环境下(谷歌.火狐.搜狗.360.QQ浏览器等主流浏览器都可以使用)只需要在<inp

Abp中SwaggerUI的接口文档添加上传文件参数类型

在使用Swashbuckle上传文件的时候,在接口文档中希望看到上传控件,但是C#中,没有FromBodyAttribute这个特性,所以需要在运行时,修改参数的swagger属性. 首先看下,最终效果: 下面介绍实现. 实现原理,通过swagger提供的filter,找到action中带有SwaggerFileUpload特性的参数,然后给swagger operaion.parameters添加一个自定义的参数,即文件类型参数即可. (1)定义SwaggerFileUploadAttribu

js限制上传文件的类型和大小

var maxsize = 6*1024*1024;//6M var errMsg = "上传的附件文件不能超过6M!!!"; var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过6M,建议使用IE.FireFox.Chrome浏览器."; var browserCfg = {}; var ua = window.navigator.userAgent; if (ua.indexOf("MSIE")>=1)

JS 限制上传文件的类型和大小

<!DOCTYPE html> <!-- saved from url=(0035)http://localhost:9090/qraved/update --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> &l

前端js上传文件后端C#接收文件

本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type="file" /> <button type="submit">文件上传</button> </form> js function uploadFile(event) { var files = event.target[0]

asp.net mvc 实现上传文件带进度条

思路:ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memcached缓存,因为项目其他地方也用了的,所以就直接用这个啦.注意:不能使用session来保存进度,因为session是线程安全的不能实时获取进度,可是试试httpcache或者memorycache,这两个我没有试过,请自行尝试. ps:使用websocket来实现也是不错的,不过我没有试过,有心的大神可以去试试. 下面贴一张效果图: 前端ajax上传文件,我使用了两种jq插件.一种是a