兼容IE低版本的文件上传解决方案

文件上传兼容简直头疼，为此特意封装了个方法，支持IE低版本（>=7）上传及现代浏览器显示上传进度，

此方法只是个hello world，jser可根据自己的需求增减功能及样式

敬上代码，抛砖引玉

调用

    var $file = $('input控件');
    var config = {
    fileExtension: 'jpg, png, pdf, psd',  //允许上传de文件格式
    fileSize: 100*1024*1024, //允许上传的最大尺寸
    uploadUrl: '***', //上传地址
    deleteUrl: '***', //删除地址
    uploadCb: function(res){
      console.log('success')
    },
    deleteCb: function(res){
      console.log('delete')
    }
  }
    $file.uploadFile(config)

方法

(function($){
  // 全局变量
  var $this = '', //上传控件
      $container, //最外层容器
      $showFileContainer, //显示文件容器
      $showFileItem //显示单个文件
  var fileId = new Date().getTime(); //时间戳，区分每次上传
  var config = {};  // 配置参数
  // 关于上传进度变量
  var ot = 0; //上次调用的时间
  var oloaded = 0; //已上传文件大小
  var xhr = '';

  $.fn.uploadFile = function(conf){
    // 接收配置参数
    config = conf;
    $this = $(this);
    new initLayout($this)
    var inputData = [];
    /**
     * 上传文件
     * -----------
     * input files属性ie10及以下不支持
     * formdata ie10以下不支持
     * 根据是否支持files属性判断现代浏览器
     */
    $('body').on('change propertychange',$this,function(){
      fileId = new Date().getTime(); //更新时间戳
      // 区分ie10及以下
      if(browserInfo().browser.name == "Internet Explorer" && browserInfo().browser.edition*1 < 11){
        // ie低版本浏览器

        // ie单个文件过滤限制
        ie_singleFilefilter()
      }else{
        // 现代浏览器
        var files = $this[0].files;
        // files无数据跳出
        if(!files.length){
          return false
        }
        // 单个文件过滤限制
        new singleFilefilter(files)
        return false
      }
      // 最后执行
      clearFile();
    })

    // 删除单个文件
    $container.on('click',".f-itemDel",function(ev){
      if(!config.deleteUrl){
        return false
      }
      $.ajax({
        type: "POST",
        url: config.deleteUrl,
        data: {},
          success :function(data){
              var $del = $(ev.target);
              $del.closest('.f-item-info').remove();
              // 删除回调
              config.deleteCb(data);

              clearFile();
          },
          error: function(data){
            
          }
      });
    })
  }


  // 初始化布局
  function initLayout(){
    var inpId = $this.prop('id')?$this.prop('id'): (new Date).valueOf();
    var $creatParent = $('<div class="f-container">
    <div class="f-input"></div>
    <div class="f-preview"></div>
    <div class="f-button"><label class="f-label-btn" for="'+inpId+'">add file</label></div>
    <div class="f-showInfo"></div>
    </div>');
    $this.after($creatParent);
    $creatParent.find('.f-label-btn').append($this);

    $container = $creatParent;
    $showFileContainer = $container.find(".f-showInfo")
  }

  /**
   * singleFilefilter 
   * 单个文件过滤-限制格式、大小、数量
   * -------
   * @param singleFile 
   * 接收单个文件
   * ---------
   * @return
   */
  function singleFilefilter(files){
    var singleFile = files[0]; //获取单个文件
    var extensions = config.fileExtension.split(','); //允许拓展名
    var singleExtension = '' ;// 单文件拓展名
    var singleSize = singleFile.size; //单文件大小
    var isNext = false;
    // 格式限制
    singleExtension = singleFile.name.substring(singleFile.name.lastIndexOf(".")+1).toLowerCase();
    if(extensions && extensions.length){
      for(var i = 0; i < extensions.length; i++){
        if(singleExtension == extensions[i].trim()){
          isNext = true;
        }
      }
    }
    // 判断isNext和singleExtension,为空或为false时提示
    if(!isNext){
      alert('文件格式不正确！');
      clearFile()
      return false;
    }
    // 大小限制
    if(singleSize > config.fileSize){
      alert("文件过大！")
      clearFile()
      return false;
    }

    //显示正在上传文件
    new showFile(singleFile)
    // 获取数据
    var uploadDate = new FormData();
    uploadDate.append("file",singleFile);
    // ajax上传
    new ajaxUpload(uploadDate);
  }

  // 现代浏览器上传
  function ajaxUpload (uploadDate){
    $.support.cors = true;
    ot = new Date().getTime();//获取上传开始时间
    $.ajax({
      type: "POST",
      url: config.uploadUrl,
      data: uploadDate,//这里上传的数据使用了formData 对象
      processData : false,
      //必须false才会自动加上正确的Content-Type
      contentType : false ,

      //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
      xhr: function(){
          xhr = $.ajaxSettings.xhr();
          var res = 0;
          xhr.upload.onprogress=progressFunc; //文件上传进度
          // 以下部分待测试
          // xhr.upload.onload = res = uploadComplete; //请求完成
          // xhr.upload.onerror =  uploadFailed; //请求失败
          // xhr.upload.onabort=abortFunc(); //文件上传取消
            return xhr;
        },
        success :function(data){
          if(config.callback){
            config.callback(data);
          }

          clearFile();
        },
        error: function(data){
        }
    });
  }

  // 文件上传进度
  function progressFunc(evt){
    // evt.total是需要传输的总字节，evt.loaded是已经传输的字节。如果evt.lengthComputable不为真，则evt.total等于0
    var nt = new Date().getTime();//获取上传开始时间
    if (evt.lengthComputable) {
      var num = Math.round(evt.loaded / evt.total * 100); //转换百分比
      if(num == 100){
          // 隐藏进度条
          // hiddenUploading($progressBar);
      }
      num += "%";
      $showFileItem.find(".f-itemPmgressBar .f-pmgress").css({
         num
      })

      // 计算速率oloaded
      var preTime = (nt-ot)/1000;
      var preLoad = evt.loaded - oloaded;
      oloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算
      var speed = preLoad/preTime;
      var unit = 'b'
        // 单位转换
      if(speed/1024 > 1){
        speed = speed/1024;
        unit = 'kb';
      }
      if(speed/1024 > 1){
        speed = speed/1024;
        unit = 'M';
      }
      // 小数只保留两位
      if(parseInt(speed)!=speed){
        speed = speed.toFixed(2);
      }
      // 显示速度
      $showFileItem.find(".f-itemSpeed").html(speed + unit + "/s" )
      
      // 上传完删除进度条及速度
      if(evt.total == evt.loaded){
        $showFileItem.find(".f-itemPmgressBar").remove();
        $showFileItem.find(".f-itemSpeed").remove();
      }
    }
  }

  // 显示文件数据
  function showFile(file){
    var size = file.size;
    var unit = 'b';
    
    // 单位转换
    if(size/1024 > 1){
      size = size/1024;
      unit = 'kb';
    }
    if(size/1024 > 1){
      size = size/1024;
      unit = 'M';
    }
    // 小数只保留两位
    if(parseInt(size)!=size){
      size = size.toFixed(2);
    }

    var itemTemp = '<div class="f-item-info" data-id="'+ fileId +'">
                      <span class="f-itemName">'+ file.name +'</span>
                      <span class="f-itemSize">('+ size + unit +')</span>
                      <span class="f-itemPmgressBar"><span class="f-pmgress"></span></span>
                      <span class="f-itemSpeed"></span>
                      <span class="f-itemDel">delete</span>
                    </div>'
    $showFileContainer.append(itemTemp);
    $showFileItem = $showFileContainer.find(".f-item-info[data-id = "+ fileId +"]")
  }
  
  // ie单个文件过滤限制
  function ie_singleFilefilter(){
    var fPath = $this.val() //文件路径+文件名
    var fName = fPath.substring(fPath.lastIndexOf("\") + 1); //文件名
    var extensions = config.fileExtension.split(','); //允许拓展名
    var singleExtension = /.[a-zA-Z]+$/.exec($this.val())[0].substring(1); // 单文件拓展名
    var isNext = false;

    // 格式限制
    if(extensions && extensions.length){
      for(var i = 0; i < extensions.length; i++){
        if(singleExtension == extensions[i].trim()){
          isNext = true;
        }
      }
    }
    // 判断isNext和singleExtension,为空或为false时提示
    if(!isNext){
      alert('文件格式不正确！');
      clearFile();
      return false;
    }

    var opt={
      iName: $this.prop('id')+' ',
      url: config.url,
      callback: config.callback,
      file: {
        name: fName
      }
    }
    // 动态创建iframe上传文件
    creatIframe(opt)
  }

  // 创建iframe及表单提交
  function creatIframe(opt){
    var $f_parent = $this.parent();
    var $iframe = $('<iframe name="'+ opt.iName +'" id="' + opt.iName + '" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>');
    var $form = $('<form method="post" style="display: none;" target="'+opt.iName+'" action="'+opt.url+'"  name="form_'+opt.iName+'" enctype="multipart/form-data" />');
    // 将控件插入form表单
    $("body").append($iframe);
    // var $form = $('body').find('form');
    $("body").append($form);
    $form.append("<input name='test' type='text'>").append($this);
    // $form.append($("#uploadFile"));

    // 表单提交
    $form.submit();
    // 获取数据，删除iframe
    $iframe.ready(function(){
      var data = $iframe.contents().find('body').html();
      if(opt.callback){
        opt.callback(data);
      }
      // 删除iframe，form
      $iframe.remove();
      $form.remove();
      // 控件放回原始位置
      $f_parent.append($this);
      ie_showFileinfo(opt);

      clearFile();
      return false
    })
  }

  // ie文件显示
  function ie_showFileinfo(opt){
    var itemTemp = '<div class="f-item-info" data-id="'+ fileId +'">
      <span class="f-itemName">'+ opt.file.name +'</span>
      <span class="f-itemDel">delete</span>
    </div>'
    $showFileContainer.append(itemTemp);
    $showFileItem = $showFileContainer.find(".f-item-info[data-id = "+ fileId +"]")
  }

  //取消上传
  // abortFunc();
  function abortFunc(){
    // 关闭xhr
    xhr.abort();
    console.log("上传取消");
  }

  // 清空文件
  function clearFile(){
    if(browserInfo().browser.name == "Internet Explorer" && browserInfo().browser.edition*1 < 11){
      document.getElementById($this.prop("id")).outerHTML += '';
    }else{
      $this.val('');
    }
  }

  // 获取浏览器信息
  var browserInfo = function() {
    var NT = {
        '4.90': 'Windows ME',
        '4.0': 'Windows NT',
        '5.0': 'Windows 2000',
        '5.01': 'Windows 2000 SP1',
        '5.1': 'Windows XP',
        '5.2': 'Windows XP 64-bit / Windows Server 2003',
        '6.0': 'Windows Vista / Windows Server 2008',
        '6.1': 'Windows 7 / Windows Server 2008 R2',
        '6.2': 'Windows 8',
        '6.3': 'Windows 8.1',
        '6.4': 'Windows 10 Technical Preview',
        '10.0': 'Windows 10'
    }
    var userAgent = navigator.userAgent.toLowerCase();
    var platform = navigator.platform;
    var browserName = /(msies|trident.*rv:)([w.]+)/.test(userAgent) ? 'Internet Explorer': (window.opera && window.opera.version ? 'Opera': ((userAgent.indexOf('edge') > -1) ? 'Microsoft Edge': ((userAgent.indexOf('chrome') > -1) ? 'Chrome': ((userAgent.indexOf("firefox") > -1) ? 'Firefox': (userAgent.indexOf('safari') > -1 ? 'Safari': 'Unknown')))));
    var browserVersion = browserName == 'Internet Explorer' ? (userAgent.indexOf('rv:') > -1 ? userAgent.match(/rv:[d.]+/gi)[0].replace('rv:', '') : userAgent.match(/msies[d.]+/gi)[0].replace('msie ', '')) : (browserName == 'Microsoft Edge' ? userAgent.match(/edge/[d.]+/gi)[0].replace('edge/', '') : (browserName == 'Firefox' ? userAgent.match(/firefox/[d.]+/gi)[0].replace('firefox/', '') : (browserName == 'Chrome' ? userAgent.match(/chrome/[d.]+/gi)[0].replace('chrome/', '') : (browserName == 'Safari' ? userAgent.match(/safari/[d.]+/gi)[0].replace('safari/', '') : 'Unknown'))));
    var browserEdition = browserVersion.split('.')[0];
    var kernelName = userAgent.indexOf('trident') > -1 ? 'Trident': userAgent.indexOf('edge') > -1 ? 'Edge': (((userAgent.indexOf('applewebkit') > -1) ? 'Webkit': ((userAgent.indexOf('gecko') > -1) ? 'Gecko': 'Unknown')));
    var kernelVersion = kernelName == 'Trident' ? (userAgent.match(/Trident/[d.]+/gi)[0].replace('Trident/', '')) : (browserName == 'Firefox' ? userAgent.match(/gecko/[d.]+/gi)[0].replace('gecko/', '') : ((browserName == 'Chrome' || browserName == 'Safari') ? userAgent.match(/applewebkit/[d.]+/gi)[0].replace('applewebkit/', '') : (browserName == 'Microsoft Edge' ? userAgent.match(/edge/[d.]+/gi)[0].replace('edge/', '') : 'Unknown')));
    var kernelEdition = kernelVersion.split('.')[0];
    var osName = userAgent.indexOf('android') > -1 ? 'Android': (userAgent.indexOf('ipad') > -1 ? 'iOS(iPad)': (userAgent.indexOf('iphone') > -1 ? 'iOS(iPhone)': userAgent.indexOf('windows phone') > -1 ? 'Windows Phone': (((platform == "Win32") || (platform == "Windows") ? 'Microsoft Windows': (navigator.platform == "Mac68K") || ((navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel") ? 'Apple Mac': 'Unknown')))));
    var osEdition = osName == 'Android' ? userAgent.match(/androids[d.]+/gi)[0].replace('android ', '') : ((osName == 'iOS(iPad)' || osName == 'iOS(iPhone)') ? userAgent.match(/oss[d_]+/gi)[0].replace('os ', '').replace('_', '.') : (osName == 'Windows Phone' ? userAgent.match(/windowssphones[d.]+/gi)[0].replace('windows phone ', '').replace('_', '.') : (osName == 'Microsoft Windows' ? (NT[userAgent.match(/windowssnts[d.]+/gi)[0].replace('windows nt ', '')] ? NT[userAgent.match(/windowssnts[d.]+/gi)[0].replace('windows nt ', '')] : 'Unknown') : 'Unknown')));
    return {
        browser: {
            name: browserName,
            edition: browserEdition,
            version: browserVersion
        },
        kernel: {
            name: kernelName,
            edition: kernelEdition,
            version: kernelVersion
        },
        os: {
            name: osName,
            edition: osEdition
        }
    };
  }
})(jQuery)