input上传文件检测文件大小

最新推荐文章于 2023-03-10 11:22:57 发布

qq_45670012

最新推荐文章于 2023-03-10 11:22:57 发布

阅读量371

点赞数

分类专栏：前端文章标签： javascript 知识总结 input上传文件检测文件大小

原文链接：https://www.mk2048.com/blog/blog.php?id=h0khhbacabaa&title=input%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E6%A3%80%E6%B5%8B%E6%96%87%E4%BB%B6%E5%A4%A7%E5%B0%8F

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

前几天在做 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

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_45670012

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
input上传文件检测文件大小

前几天在做 input[type='file'] 上传图片时，需要检测上传文件的内存大小，写了一个小demo，在此做一总结： <!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫