<html>

<head>    

<script type="text/javascript">    

function fileChange(target){

//检测上传文件的类型

var imgName = document.all.up_file.value;

     var ext,idx;

    if (imgName == ''){

       document.all.submit_upload.disabled=true;

        alert("请选择需要上传的文件!");

        return;

    } else {

        idx = imgName.lastIndexOf(".");

        if (idx != -1){

            ext = imgName.substr(idx+1).toUpperCase();

            ext = ext.toLowerCase( );

           // alert("ext="+ext);

            if (ext != 'jpg' && ext != 'png' && ext != 'jpeg' && ext != 'gif'){

              document.all.submit_upload.disabled=true;

                alert("只能上传.jpg  .png  .jpeg  .gif类型的文件!");

                return;

            }

        } else {

          document.all.submit_upload.disabled=true;

           alert("只能上传.jpg  .png  .jpeg  .gif类型的文件!");

            return;

        }

    }

    //检测上传文件的大小

    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

    var fileSize = 0;

    if (isIE && !target.files){

        var filePath = target.value;

        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");

        var file = fileSystem.GetFile (filePath);

        fileSize = file.Size;

    } else {

        fileSize = target.files[0].size;

    }     

    var size = fileSize / 1024*1024;   

    if(size>(1024*200)){

    document.all.submit_upload.disabled=true;

        alert("文件大小不能超过200KB");

    }else{

    document.all.submit_upload.disabled=false;

    }

}

</script>

</head>

<body>

<input type="file" id="up_file" name="up_file" onchange="fileChange(this);" />

<input id="submit_upload" type="submit" class="load-btn" value="上传" disabled />

</body>

</html>

js限制上传文件类型和大小的更多相关文章

  1. 前端js限制上传文件类型及大小（1）

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. JS判断上传文件类型

    /*   * 判断图片类型   */    function checkImgType(ths){        if (ths.value == "") {            ...

  3. JS 判断上传文件类型

    var video_src_file = $("#video_src_file").val(); var fileTypes = new Array("flv" ...

  4. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  5. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  6. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

  7. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  8. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  9. input 限制 上传文件类型

    参考:input file控件限制上传文件类型 HTML <input> 标签的 accept 属性 网页上添加一个input file HTML控件: <input id=&quo ...

随机推荐

  1. 单链表及基本操作（C语言）

    #include <stdio.h> #include <stdlib.h> /** * 含头节点单链表定义及基本操作 */ //基本操作函数用到的状态码 #define TR ...

  2. apk、dex完整性验证

    对Dex进行完整性的检查,可通过CRC,或者Hash值.可将校验值放到String资源文件里,或者放到服务器中. 1. 在代码中完成校验值对比逻辑,此部分代码后续不能再改变,否则CRC值会发生变化: ...

  3. 攻防世界 reverse SignIn

    SignIn    2019_SUCTF __int64 __fastcall main(__int64 a1, char **a2, char **a3) { char mod; // [rsp+0 ...

  4. 在SSM框架中如何将图片上传到数据库中

    今天我们来看看SSM中如何将图片转换成二进制,最后传入到自己的数据库中,好了,废话不多说,我们开始今天的学习,我这里用的编辑器是IDEA 1.导入图片上传需要的jar依赖包 1 <depende ...

  5. Elasticsearch扩展X-pack实施流程-实施

    Elasticsearch扩展X-PACK实施流程 elasticsearch5.2.1安装X-PACK,对ES集群进行监控,报警,安全验证,报告,图形化操作 注意 版本号需要固定,小版本都不能差,要 ...

  6. [2020年10月28日普级组]1408.MSWORLD

    1408. M S W O R L D 1408.MSWORLD 1408.MSWORLD 题目描述 Bessie , Farmer John 的优选牛,刚刚获得了一个牛科动物选美比赛的冠军!并得到了 ...

  7. Dynamics CRM制作报表的时候让用户可以用自己的权限浏览数据

    我们做SSRS报表的时候最头疼的问题就是用Sql查出来的数据都是全部数据没有做权限过滤,导致不同用户看到的数据是一样的. 确实Dynamics CRM产品的数据库时有对这个做处理的,其中每个实体都会有 ...

  8. Java基础 - List的两个子类的特点

    List两个子类的特点 List的两个子类的特点 因为两个类都实现了List接口,所以里面的方法都差不多,那这两个类都有什么特点呢? ArrayList: 底层数据结构是数组,查询快,增删慢. Lin ...

  9. antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...

  10. 铁人三项(第五赛区)_2018_seven

    铁人三项(第五赛区)_2018_seven 先来看看保护 保护全开,IDA分析 首先申请了mmap两个随机地址的空间,一个为rwx,一个为rw 读入的都shellcode长度小于等于7,且这7个字符不 ...