<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全面瓦解24：构建高性能索引（策略篇）

    学习如果构建高性能的索引之前,我们先来了解下之前的知识,以下两篇是基础原理,了解之后,对面后续索引构建的原则和优化方法会有更清晰的理解: MySQL全面瓦解22:索引的介绍和原理分析 MySQL全面瓦 ...

  2. go中sync.Once源码解读

    sync.Once 前言 sync.Once的作用 实现原理 总结 sync.Once 前言 本次的代码是基于go version go1.13.15 darwin/amd64 sync.Once的作 ...

  3. WPF 基础 - 属性

    1. CLR 属性 .Net Framework 中的属性又称为 CLR 属性,是对 private 字段的安全访问包装. 使用 ILSpy 反编译器可以看到 C# 中代码的属性的编译结果是 set. ...

  4. 解决unbutu网络编程socket_tcp连接不上网络助手

    unbutu开放指定端口 开放端口8080 sudo iptables -I INPUT -p tcp --dport 8080 -j ACCEPT 保存设置 iptables-save 在终端中输入 ...

  5. E - Recursive sequence HDU - 5950 （矩阵快速幂）

    题目链接:https://vjudge.net/problem/HDU-5950 思路: 构造矩阵,然后利用矩阵快速幂. 1 #include <bits/stdc++.h> 2 #inc ...

  6. SpEL表达式注入

    一.内容简介 Spring Expression Language(简称SpEL)是一种强大的表达式语言,支持在运行时查询和操作对象图.语言语法类似于Unified EL,但提供了额外的功能,特别是方 ...

  7. ch1_5_1统计最大最小元素的平均比较次数

    public class ch1_5_1统计最大最小元素的平均比较次数 { public static void main(String[] args) { // TODO Auto-generate ...

  8. 攻防世界 reverse 进阶 easyre-153

    easyre-153 查壳: upx壳 脱壳: 1 int __cdecl main(int argc, const char **argv, const char **envp) 2 { 3 int ...

  9. 【Linux学习笔记1】-centos6.9部署django

    一,centos6.9部署django ​ 部署套件:centos6.9+nginx+mysql+uwsgi+python3+django ​ 首先还是要明白这几个部分之间的关系(自己也是初学者,希望 ...

  10. Docker备份Gitlab容器以及还原数据

    概述 今天,我们将学习如何快速地对docker容器进行快捷备份.恢复和迁移.Docker是一个开源平台,用于自动化部署应用,以通过快捷的途径在称之为容器的轻量级软件层下打包.发布和运行这些应用.它使得 ...