<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. mysql查询较长的执行进程及创建权限账号

    A:对于死锁,进程的操作 1.查找当前活跃事务 SELECT * from information_schema.INNODB_TRX 根据trx_started等判断事务是否异常锁定 2.杀死线程 ...

  2. pip安装更新模块，以及执行更新所有模块

    moudle_name:是对应的模块名:请自行更换为自己需要更新的模块名 查看所有可更新的模块: pip list --outdated 更新某一个模块: pip install --upgrade ...

  3. Prometheus时序数据库-数据的查询

    Prometheus时序数据库-数据的查询 前言 在之前的博客里,笔者详细阐述了Prometheus数据的插入过程.但我们最常见的打交道的是数据的查询.Prometheus提供了强大的Promql来满 ...

  4. 【ZeyFraのJavaEE开发小知识05】Mybatis-Plus & Axios

    关于如何在Mybatis-Plus中添加SQL拦截器 之前ZeyFra在MyBatis-Plus[踩坑记录01]一文中提到过,使用Mybatis-Plus时最好使用MybatisSqlSessionF ...

  5. 实验一 Python程序设计入门

    学号20184307 2019-2020-2 <Python程序设计>实验1报告 课程:<Python程序设计> 班级: 1843 姓名: 章森洋 学号:20184307 实验 ...

  6. IdentityServer4是什么

    1 什么是IdentityServer4? IdentityServer4是用于ASP.NET Core的OpenID Connect和OAuth 2.0框架. 2 什么是OAuth 2.0? OAu ...

  7. Oauth2协议那些事

    1. 背景 首先,设想一种情境:你平常会使用一款照片存储App(以下照片服务指代),用来将自己喜欢的照片存放在上面以备随时查看.假如有一天,你想要打印其中的某张照片而且你找到了一款打印照片App(以下 ...

  8. Redis 超详细自动管理Cluster集群工具上手 redis-trib.rb （多图，手把手）

    安装介绍 ​ redis-trib.rb是一款由Redis官方提供的集群管理工具,能够大量减少集群搭建的时间. ​ 除此之外,还能够简化集群的检查.槽迁徙.负载均衡等常见的运维操作,但是使用前必须要安 ...

  9. [SIGIR2020] Sequential Recommendation with Self-Attentive Multi-Adversarial Network

    这篇论文主要提出了一个网络,成为Multi-Factor Generative Adversarial Network,直接翻译过来的话就是多因子生成对抗网络.主要是期望能够探究影响推荐的其他因子(因 ...

  10. 结对编程-stage_2

    教学班 罗杰.任建班周五3.4节 gitlab项目地址 Here it is. 成员 周远航(3004) 李辰洋(3477) 结对编程体验 经过了上一阶段的磨合,第二阶段我们的配合更加流畅,也熟悉了对 ...