<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. golang调用shell命令（实时输出, 终止等）

    背景 是这样的,最近在研究一个定时任务系统的改造,可能有点像jenkins做到的那种吧. 可以输入shell命令,也可以执行py脚本等等,相比之前来说,也要能够及时停止! 但是遇到了这么个问题,gol ...

  2. 大数据实战-Spark实战技巧

    1.连接mysql --driver-class-path mysql-connector-java-5.1.21.jar 在数据库中,SET GLOBAL binlog_format=mixed; ...

  3. jdk 集合大家族之Map

    jdk 集合大家族之Map 前言: 之前章节复习了Collection接口相关,此次我们来一起回顾一下Map相关 .本文基于jdk1.8. 1. HashMap 1.1 概述 HashMap相对于Li ...

  4. LNMP配置——Nginx配置 ——Nginx防盗链

    一.配置 #vi /usr/local/nginx/conf/vhost/test.com.conf 写入: server { listen 80; server_name test.com test ...

  5. python基础学习之集合set

    .集合:set 特点:无序,不可重复(自动去重),可更改,可以与元组.列表互相转换 格式:s = {'x','y','z'} 转换:(转回用set) s = {'x','y','z'}        ...

  6. POJ_1797 Heavy Transportation 【最大生成树的最小边】

    一.题目 POJ1797 二.分析 题意就是让你找到从1到n的一条路,由于边的最大称重限制,你需要确定限制的最小值,也就是能运输的最大值. 可以结合最小生成树想,利用并查集,然后不断更新答案即可,需要 ...

  7. 前端学习 node 快速入门 系列 —— 服务端渲染

    其他章节请看: 前端学习 node 快速入门 系列 服务端渲染 在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...

  8. python 序列与字典

    序列概念: 序列的成员有序排列,可以通过下标访问到一个或几个元素,就类似与c语言的数组. 序列的通用的操作: 1:索引 11 = [1,2,3,4] 11[0] = 1 2:切片 11[1,2,3,4 ...

  9. 2017-2018 ACM-ICPC Northern Eurasia（A.Archery Tournament）

    题目链接:https://vjudge.net/problem/Gym-101630A 题意: n个事件,t=1 代表增加一个圆心为(x,y),半径为 abs(y)的靶子,t=2,代表射击的坐标为(x ...

  10. PTA 中序输出度为1的结点

    6-9 中序输出度为1的结点 (10 分)   本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树中度为1的结点. 函数接口定义: void InorderPrintNodes( BiTree T ...