<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. strick-footer 粘边布局

    当网页缩小, 缩放到一定高度时(这个高度就是页面内容高度)footer的页尾自动消失,这个就叫做粘边布局 strick-footer 粘边布局基本思路: 主体{ height:100%; } 内容体{ ...

  2. CRLF注入

    CRLF注入 Title: [CVE-2019-9740] Python urllib CRLF injection vulnerability Category: security Stage: r ...

  3. Flutter教程- Dart语言规范-知识点整理

    Flutter教程- Dart语言知识点整理 Dart语言简介 Dart语言介绍 ① 注释的方式 ② 变量的声明 ③ 字符串的声明和使用 ④ 集合变量的声明 ⑤ 数字的处理 ⑥ 循环的格式 ⑦ 抛异常 ...

  4. SpringBoot学习笔记（四）

    本文主要介绍:SpringBoot开发中如何自定义starter 1.什么是starter Starter可以理解为一个可拔插式的插件,提供一系列便利的依赖描述符,您可以获得所需的所有Spring和相 ...

  5. 一次VLAN标签引发的网络事件的处置

    一次VLAN标签引发的网络事件的处置 一.背景介绍 事件背景: HZ某分公司新装一套业务系统,通过一条专线和BJ总公司连通.分配给HZ公司的ip地址为:a.b.c.X,掩码24位,网关a.b.c.1. ...

  6. C# 8.0 宝藏好物 Async streams

    之前写<.NET gRPC 核心功能初体验>,利用gRPC双向流做了一个打乒乓的Demo,存储消息的对象是IAsyncEnumerable<T>,这个异步可枚举泛型接口支撑了g ...

  7. 2021精选 Java面试题附答案（一）

    1.什么是Java Java是一门面向对象的高级编程语言,不仅吸收了C++语言的各种优点,比如继承了C++语言面向对象的技术核心.还摒弃了C++里难以理解的多继承.指针等概念,,同时也增加了垃圾回收机 ...

  8. Linux 服务器性能测试报告-sysbench命令实践

    Linux 服务器性能测试报告 我们使用linux 工具sysbench 来测试linux服务器性能,目前在Centos上进行操作 Install sysbench yum -y install sy ...

  9. [Azure Devops] 使用 Azure Pipelines 实现 CI

    1. 什么是 Azure Pipelines Azure Pipelines 会自动构建和测试代码项目,以将其提供给其他人.它适用于任何语言或项目类型.Azure Pipelines 结合了持续集成 ...

  10. M3D - 一个想突破又还有很多包袱的新生三维数据格式杂谈

    目录 1 门派 2 几个术语简析 3 结构简析 3.1 空间剖分方式 3.2 空间范围表示方式 4 M3DDataInfo.mcj 类定义 5 NodeInfo.json 类定义 6 *.m3d 文件 ...