美文网首页
修改layim-mobile 下面的 upload-mobile

修改layim-mobile 下面的 upload-mobile

作者: 牛奶ban | 来源:发表于2019-08-10 16:49 被阅读0次
这几天 客服系统 想用layim 来处理客服消息,但是发现 mobile 模式下 上传居然是不能用,看官方也没有更新,贤心大神让自己改造

于是我用自己蹩脚的js 改了下 ,本地已经测试,主要是改了ajax方式提交 不支持老的浏览器
这个还有 一点 不明白 为啥try catch 老走catch 我注释掉了 就可以了
文件放到 src/lay/modules/mobile 下
具体代码如下

/*!

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

 */
 
layui.define(['layer-mobile', 'zepto'] , function(exports){
  "use strict";
  
  var $ = layui.zepto;
  var layer = layui['layer-mobile'];
  var device = layui.device();
  
  var elemDragEnter = 'layui-upload-enter';
  var elemIframe = 'layui-upload-iframe';
 
  var msgConf = {
    icon: 2
    ,shift: 6
  }, fileType = {
    file: '文件'
    ,video: '视频'
    ,audio: '音频'
  };
  
  layer.msg = function(content){
    return layer.open({
      content: content || ''
      ,skin: 'msg'
      ,time: 2 //2秒后自动关闭
    });
  };
  
  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);
      console.log(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);
      //console.log(form);
      
      //触发上传
      item.off('change').on('change', function(){
      
        that.action(this, type,form);
      });
    });
  };
  
  //提交上传
  Upload.prototype.action = function(input, type,form){
    var that = this, options = that.options, val = input.value;
    var item = $(input), ext = item.attr('lay-ext') || options.ext || ''; //获取支持上传的文件扩展名;
    //console.log(val)
    //console.log(form[0])
    if(!val){
      return;
    };
    
    //校验文件
    switch(type){
      case 'file': //一般文件
        if(ext && !RegExp('\\w\\.('+ ext +')$', 'i').test(escape(val))){
          layer.msg('不支持该文件格式', msgConf);
          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 = '';
        }
      break;
      case 'audio': //音频文件
        if(!RegExp('\\w\\.('+ (ext||'mp3|wav|mid') +')$', 'i').test(escape(val))){
          layer.msg('不支持该音频格式', msgConf);
          return input.value = '';
        }
      break;
      default: //图片文件
        if(!RegExp('\\w\\.('+ (ext||'jpg|png|gif|bmp|jpeg') +')$', 'i').test(escape(val))){
          layer.msg('不支持该图片格式', msgConf);
          return input.value = '';
        }
      break;
    }
     //主要是这边传入form 
    var formData = new FormData(form[0]);
      //console.log(item);   
    //formData.append(options.field,form[0]);
    
    //追加额外的参数
    layui.each(options.data, function(key, value){
      value = typeof value === 'function' ? value() : value;
      formData.append(key, value);
    });
    console.log(formData)
    //提交文件
   //如何ajax提交
    $.ajax({
      url: options.url
      ,type: 'post'
      ,data: formData
      ,contentType: false 
      ,processData: false
      ,dataType: 'json'
      ,headers: options.headers || {}
      ,success: function(res){
        
       
        if(res){
      
     
          try {
            //console.log(res);

           // console.log(11111111);
            res = JSON.parse(res);
            console.log(res);
          } catch(e){
           // res = {};
            //return layer.msg('请对上传接口返回JSON字符', msgConf);
          }
          typeof options.success === 'function' && options.success(res, input);
        }
       // layer.msg('请求上传接口成功');
      }
      ,error: function(){
       
        layer.msg('请求上传接口出现异常');
       
      }
    });
  // console.log(res);

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

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



相关文章

网友评论

      本文标题:修改layim-mobile 下面的 upload-mobile

      本文链接:https://www.haomeiwen.com/subject/apbrjctx.html