input上传文件检测文件大小

前几天在做 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[0]) {
        //                alert(img);
        //                alert(img.files[0])
        alert('你选择的文件大小' + (img.files[0].size / 1024).toFixed(0) + "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 / 1024).toFixed(0) + "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

 

posted @   ~逍遥★星辰~  阅读(553)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示