前几天在做 input[type='file'] 上传图片时，需要检测上传文件的内存大小，写了一个小demo，在此做一总结：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>文件上传大小检测</title>

</head>

<body>

  <input name="txtName" type="file" multiple accept="image/*" id="pic" onchange="loadImage(this)" />

  <script>

    function loadImage(img) {

      var filePath = img.value;

      var fileExt = filePath.substring(filePath.lastIndexOf("."))

        .toLowerCase();

      if (!checkFileExt(fileExt)) {

        alert("您上传的文件不是图片,请重新上传！");

        img.value = "";

        return;

      }

      if (img.files && img.files[]) {

        //                alert(img);

        //                alert(img.files[0])

        alert('你选择的文件大小' + (img.files[].size / ).toFixed() + "kb");

      } else {

        img.select();

        var url = document.selection.createRange().text;

        try {

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

        } catch (e) {

          alert('如果你用的是ie8以下 请将安全级别调低！');

        }

        alert("文件大小为：" + (fso.GetFile(url).size / ).toFixed() + "kb");

      }

    }

    function checkFileExt(ext) {

      if (!ext.match(/.jpg|.gif|.png|.bmp/i)) {

        return false;

      }

      return true;

    }

  </script>

</body>

</html>

上传文件之后浏览器显示：

之后又发现了其他大牛的全能博客：

https://www.cnblogs.com/tjzhangjianjun/p/5670972.html

https://www.haorooms.com/post/input_file_leixing

input上传文件检测文件大小的更多相关文章

  1. input上传文件个数控制

    HTML: <h3>请上传[2,5]个文件</h3> <form action="" enctype="multipart/form-dat ...

  2. 工作笔记——限定input上传文件对话框中能选取的文件的格式

    原文:http://www.dengzhr.com/frontend/1059 input[file]标签的accept属性可用于指定上传文件的 MIME类型 . 例如,想要实现默认上传图片文件的代码 ...

  3. input上传文件获取文件后缀名+select通过text选中option

    1.input获取后缀名 var fileName = $("input[type='file']").val();//获取上传的文件(单个) var extName = file ...

  4. input上传文件显示图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5_纯JS实现上传文件显示文件大小，文件信息，上传进度_不使用JS库

    前台 html <input type="file" id="_netLogo" onchange="fileSelected();" ...

  6. 监听 input上传文件， 获取文件名称，

    <div class="import-box pr" > <span class="model-address-txt">导入文件:&l ...

  7. input 上传文件的判断

    <html> <head> <meta charset='utf-8'> <meta name="viewport" content=&q ...

  8. input 原生上传文件（type = file）

    1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...

  9. (转)django上传文件

    本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另:  本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...

随机推荐

  1. Websphere 手动模拟删除应用操作

    Websphere  手动模拟删除应用操作 切记:不要在程序还在运行的时候,直接的remove掉应用程序,不然,会发生意外的错误.       最近,在项目中,不小心手动移除了正在运行的应用,发现se ...

  2. 『转』The Beginning of your Design Career

    想想,如果明天我开始学日语,坚持到毕业,其实也可以日语入门了.所以机会都是抓住,当初,也就是去年的时候,我那个时候就开始坚持日语入门,想想现在应该可以开始N2了吧-所以...过去不去理会,现在开始继续 ...

  3. 京东专业“卖”队友，魅族手环将亮相1206魅蓝note新品发布会

    京东一直是国内顶级的数码产品自营销售渠道,但是,正因为庞大的数据体系和平台特殊性,经常会帮我们发现一些“好玩的”保密性较高的东西,譬如价格.信息.谍照等.而在最新上线的京东超级品牌日活动页面上,专业“ ...

  4. bootstrap与jQuery结合的动态进度条

    此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...

  5. ajax发送请求是图标转圈圈实现

    css部分 .load-img{ //控制图标大小width:40px;height:40px;margin:100px;border-radius:50%;-webkit-animation:cir ...

  6. bzoj 1189: [HNOI2007]紧急疏散evacuate 分层图最大流_拆点_二分

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是 ...

  7. 实验二：1、输出“Hello Word！”；2、测试主方法 的输入参数。3、总结

    一.输出:“Hello Word!” 1.新建java项目:点击File->New->Java Project.在project name一栏中输入自己所要创建的项目名称,点击Finish ...

  8. [TJOI2008]彩灯

    线性基裸题,求最大线性无关组. 注意:1ll<<i #include <cstdio> int n,m; const int mod=2008; long long b[64] ...

  9. bilibili用户信息查询

    bilibili用户信息查询 http://space.bilibili.com/ajax/member/GetInfo?mid= 后缀为用户mid号 # -*- coding:utf-8 -*- # ...

  10. [SQL]存储过程建表

    create PROC [dbo].CreateUserTable ( @name NVARCHAR(60) ) AS DECLARE @a NVARCHAR(max) SET @a='create ...