js图片上传，判断图片大小

最新推荐文章于 2025-05-19 14:35:28 发布

陌上浮屠

最新推荐文章于 2025-05-19 14:35:28 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/weixin_38788947/article/details/78487532

js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个统一收银台项目的图片上传功能实现方法，着重解决了不同浏览器兼容性问题，特别是IE低版本中input点击行为的差异。通过JavaScript检测文件大小及类型，并根据不同浏览器采用特定方式进行图片预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

统一收银台项目，
兼容所有浏览器，唯一的缺点就是IE低版本，input的左半部分点击一次，右半部分得点击2次
html格式如下：input浮在所有元素上面
这里写图片描述

JS代码如下：

//图片上传
  $('.uploadImg').change(function() {
    var $this = $(this);
    var file = $(this)[0];
    $(this).parent().find('img').remove()
    //大小不能超过3M
    var maxSize = 3 * 1024 * 1024;
    if (file.files && file.files[0]) {  //IE10，火狐，guge
      if (file.files[0].size > maxSize) {  //判断文件大小
        alert('文件太大')
      } else {
        var reader = new FileReader();
        reader.onload = function(evt) {
          $this.parent().append('<img src="' + evt.target.result + '" />');
        }
        reader.readAsDataURL(file.files[0]);
      }

    } else { //IE浏览器
      try {
        file.select();
        file.blur();
        var path = document.selection.createRange().text;
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        fileSize = fso.GetFile(path).size;
        if (fileSize > maxSize) {  //判断文件大小
          alert('文件太大')
        } else {
          $this.parent().append('<img src="' + file.value + '" />');
        }
      } catch (e) {
        alert(e + "\n" + "如果错误为：Error:Automation 服务器不能创建对象；" + "\n" + "请按以下方法配置浏览器：" + "\n" + "请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（不安全）-点击启用-确定】");
        return window.location.reload();
      }
    }
  })