给layui的upload加了文件大小限制

简介: /*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */layui.
/*!

 @Title: layui.upload 单文件上传 - 全浏览器兼容版
 @Author: 贤心
 @License:MIT

 */

layui.define('layer' , function(exports){
  "use strict";

  var $ = layui.jquery;
  var layer = layui.layer;
  var device = layui.device();

  var elemDragEnter = 'layui-upload-enter';
  var elemIframe = 'layui-upload-iframe';

  var msgConf = {
    icon: 2
    ,shift: 6
  }, fileType = {
    file: '文件'
    ,video: '视频'
    ,audio: '音频'
  };

  var Upload = function(options){
    this.options = options;
  };

  //初始化渲染
  Upload.prototype.init = function(){
    var that = this, options = that.options;
    var body = $('body'), elem = $(options.elem || '.layui-upload-file');
    var iframe = $('<iframe id="'+ elemIframe +'" class="'+ elemIframe +'" name="'+ elemIframe +'"></iframe>');

    //插入iframe    
    $('#'+elemIframe)[0] || body.append(iframe);

    return elem.each(function(index, item){
      item = $(item);
      var form = '<form target="'+ elemIframe +'" method="'+ (options.method||'post') +'" key="set-mine" enctype="multipart/form-data" action="'+ (options.url||'') +'"></form>';

      var type = item.attr('lay-type') || options.type; //获取文件类型

      //包裹ui元素
      if(!options.unwrap){
        form = '<div class="layui-box layui-upload-button">' + form + '<span class="layui-upload-icon"><i class="layui-icon">&#xe608;</i>'+ (
          item.attr('lay-title') || options.title|| ('上传'+ (fileType[type]||'图片') )
        ) +'</span></div>';
      }

      form = $(form);

      //拖拽支持
      if(!options.unwrap){
        form.on('dragover', function(e){
          e.preventDefault();
          $(this).addClass(elemDragEnter);
        }).on('dragleave', function(){
          $(this).removeClass(elemDragEnter);
        }).on('drop', function(){
          $(this).removeClass(elemDragEnter);
        });
      }

      //如果已经实例化,则移除包裹元素
      if(item.parent('form').attr('target') === elemIframe){
        if(options.unwrap){
          item.unwrap();
        } else {
          item.parent().next().remove();
          item.unwrap().unwrap();
        }
      };

      //包裹元素
      item.wrap(form);
      //触发上传
      item.off('change').on('change', function(){
        console.log("上传文件大小:"+item[0].files[0].size/(1024*1024)+"MB")
        var size=item[0].files[0].size/(1024*1024)
        that.action(this,type,size);
      });
    });
  };

  //提交上传
  Upload.prototype.action = function(input,type,size){
    var that = this, options = that.options, val = input.value;
    var item = $(input), ext = item.attr('lay-ext') || options.ext || ''; //获取支持上传的文件扩展名;
    if(!val){
      return;
    };

    //校验文件
    switch(type){
      case 'file': //一般文件
        if(ext && !RegExp('\\w\\.('+ ext +')$', 'i').test(escape(val))){
          layer.msg('不支持该文件格式', msgConf);
          return input.value = '';
        }
        if(size>200){
              layer.msg('文件大小不能超过200MB');
              return input.value = '';
        }
      break;
      case 'video': //视频文件
        if(!RegExp('\\w\\.('+ (ext||'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(val))){
          layer.msg('不支持该视频格式', msgConf);
          return input.value = '';
        }
        if(size>200){
              layer.msg('视频大小不能超过200MB');
              return input.value = '';
        }
      break;
      case 'audio': //音频文件
        if(!RegExp('\\w\\.('+ (ext||'mp3|wav|mid') +')$', 'i').test(escape(val))){
          layer.msg('不支持该音频格式', msgConf);
          return input.value = '';
        }
        if(size>100){
              layer.msg('音频大小不能超过100MB');
              return input.value = '';
        }
      break;
      default: //图片文件
        if(!RegExp('\\w\\.('+ (ext||'jpg|png|gif|bmp|jpeg') +')$', 'i').test(escape(val))){
          layer.msg('不支持该图片格式', msgConf);
          return input.value = '';
        }
        if(size>2){
              layer.msg('图片大小不能超过2MB');
              return input.value = '';
        }
      break;
    }

    options.before && options.before(input);
    item.parent().submit();

    var iframe = $('#'+elemIframe), timer = setInterval(function() {
      var res;
      try {
        res = iframe.contents().find('body').text();
      } catch(e) {
        layer.msg('上传接口存在跨域', msgConf);
        clearInterval(timer);
      }
      if(res){
        clearInterval(timer);
        iframe.contents().find('body').html('');
        try {
          res = JSON.parse(res);
        } catch(e){
          res = {};
          return layer.msg('请对上传接口返回JSON字符', msgConf);
        }
        typeof options.success === 'function' && options.success(res, input);
      }
    }, 30); 

    input.value = '';
  };

  //暴露接口
  exports('upload', function(options){
    var upload = new Upload(options = options || {});
    upload.init();
  });
});

目录
相关文章
|
Linux 网络安全
详解Linux常见命令及终端使用技巧
本文主要详解Linux常见命令及终端使用技巧
3222 10
|
前端开发 JavaScript Java
JavaScript复制内容到剪切板 带格式的复制
JavaScript复制内容到剪切板 带格式的复制
304 0
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
581 0
|
编解码 算法
【论文速递】Remote Sensing2021 : 通过半全局匹配法的SAR立体图像DSM生成以及惩罚方程的评估
【论文速递】Remote Sensing2021 : 通过半全局匹配法的SAR立体图像DSM生成以及惩罚方程的评估
真正解决办法:FTP 执行命令时500 Illegal PORT command
真正解决办法:FTP 执行命令时500 Illegal PORT command
3596 0
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
联通骨干网如何从内循环走向全球化?
中国联通骨干网的发展历程堪称中国互联网基础设施建设的缩影。从承载2G/3G业务的B网起步,经由169网的国内“内循环”先锋阶段,到A网(CUII)的企业级服务高速公路,再到国际化的AS10099骨干网,形成当前“China169+CUII”的双网格局。这一布局实现了普通用户与企业需求的分离,确保服务质量的同时提升资源调配效率,为数字中国建设提供了坚实支撑。
568 0
联通骨干网如何从内循环走向全球化?
|
存储 机器人 计算机视觉
接入了支付宝账户体系的旅客入住无人酒店解决方案
本书第一章介绍了一套复杂的无人酒店云平台系统,涵盖核心云平台、容灾备份、数据存储、旅客服务、嵌入式设备管理、远程人工坐席、综合业务处理、问题解决、智慧监控安防等多个子系统。各平台协同工作,确保从旅客入住、服务请求、智能设备控制到退房的全流程高效运作,并与外部机构实时对接,保障数据安全与应急响应。系统通过人脸识别、语音交互等技术,提供个性化服务,同时具备严格的实名验证机制,确保合规性与安全性。
|
前端开发 JavaScript
CSS【实战】抽屉动画
CSS【实战】抽屉动画
417 0
|
安全 测试技术 网络安全
网络安全中的渗透测试与风险评估:技术深度解析
【7月更文挑战第3天】在网络安全领域,渗透测试和风险评估是两种不可或缺的技术手段。通过模拟黑客的攻击手段来发现系统中的安全漏洞,以及通过系统性的方法来识别和评估潜在的风险和威胁,两者共同为组织提供了全面的网络安全保障。随着技术的不断发展和网络环境的日益复杂,渗透测试和风险评估的重要性将日益凸显。因此,网络安全从业者应不断学习和掌握这两种技术,以应对日益严峻的网络安全挑战。