兼容IE10上传并预览图片的方法（ie9暂时没有弄好）

以下代码会用到:1.jQuery   2.layui.all.js(要把整个插件downloaded)   3.jQuery.form.js

jQuery.form.js 使用很简单的，请参考：https://www.cnblogs.com/azhw/p/4661838.html

html:

 

<form id="designer_form" class="layui-form" lay-filter="designer_form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div style="height: 460px;">
    <div class="company-details">
        <div  class="layui-form-item">
          <p style="font-size: 14px;color:#666;margin-bottom:22px;">请上传您的设计师资格证书、个人名片或其它相关证书，有助于快速通过审核。</p>
          <div id="imgs" style="margin-bottom:14px;max-width:418px;overflow:hidden;white-space:nowrap;"></div>
          <div class="uploader" style="margin-bottom:12px;position:relative;">
            <input class="uploadInput" type="file"  multiple="multiple" accept="image/jpeg,image/png,image/jpg" style="width:102px;height:30px;display:none;"/>
            <img class="uploadImg" src="../img/register/upload-img-btn.jpg" height="30" width="102"/>
          </div>
          <span style="color:#999;">说明：图片可以不上传（若上传图片，最多只能上传 3 张）</span>
        </div>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button id="designer_registbtn" class="layui-btn" lay-submit lay-filter="designer_regist" style="margin-top: 30px;">立即注册</button>
    </div>
  </div>
</form>

js1：兼容IE10和IE9的图片预览部分

 

 

/****************************** 上传图片并且预览的方法 ******************************/
//这是间接触发<input type="file">的click事件
$(".uploadImg").click(function(){
  $(this).prev().click();
})
//图片上传,每次触发input会通过onchange来监听事件
$(".uploader").on("change",".uploadInput",function (obj){
  //region //处理<IE10不兼容的方法
  var $this = $(this);
  var oCurrentTarget = obj.currentTarget;
  if(og.isIE() && parseInt(og.IETester(navigator.userAgent)) < 10){
    //判断图片是否存在
    var existedImgs = $("div[data-flag='flag']","#imgs");
    var existedImgs_len = existedImgs.length;
    var bAppendImg = true;
    if(existedImgs_len >= 3){
      layer.msg('最多只能上传3张图片',{time:og.ogLayerTime,icon:5});
      return false;
    }
    if(existedImgs_len > 0){
      existedImgs.each(function(i,eleDom){
        var existedImg = $(eleDom).data('img');
        var exiImgName = existedImg.value.substring(existedImg.value.lastIndexOf("\\") + 1);
        var exiImgSize = existedImg.size;
        if(oCurrentTarget.value.substring(oCurrentTarget.value.lastIndexOf("\\")+1) == exiImgName && oCurrentTarget.size == exiImgSize){
          layer.msg('该图已经存在,不能重复上传',{time:og.ogLayerTime,icon:5});要引入layui.js
          bAppendImg = false;
        }
      })
    }
    if(bAppendImg){
      var html = "";
      html += "<div style='display: inline-block;position:relative;'>";
      html += "<div class='imgSet' style=\"width:100px;height:64px;margin-right:5px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="+obj.currentTarget.value+")\" data-flag='flag'></div>";
      html += "<span onclick='$(this).parent().remove();' class='deleteButton'style=\"position:absolute;right:8px;top:0;color: red;cursor:pointer;\"><i class='fa fa-window-close'></i></span>";
      html += "</div>";
      $("#imgs").append(html);
      var img = $("div[data-flag='flag']",'#imgs').last();
      img.data("img",oCurrentTarget);//将file放到img当中
    }

    $(this).remove();//清空刚才选中的图片（PS:bug,因为若选中a，如果重新选择a，就不会触发change事件， 所以要清空file）
    $(".uploadImg").before('<input class="uploadInput" type="file"  multiple="multiple" accept="image/jpeg,image/png,image/jpg1" style="width:102px;height:30px;display:none;"/>');

    //region  /*为解决bug,而执行的让file清空的两种方法，在ie9试验均没有起效果*/

    //清空刚才选中的图片（PS:bug,因为若选中a，如果重新选择a，就不会触发change事件， 所以要清空file）
    //清空file方法一：
    //this.select();
    //document.selection.clear();

    //清空file方法二：
    //this.outerHTML = this.outerHTML;
    //endregion
    return false;
  }
  //endregion

  //这里files是数组，因为可以一次选多张图片
  var files = obj.target.files || obj.dataTransfer.files;//js获取所有文件 ie10以下不支持
  //var files = $(obj).get(0).files;//jquery获取所有文件
  if (imgFilter(files) == false) {//过滤
    return false;
  }

  //判断上传的图片跟页面上的图片，如果已经上传了，不需要重新上传
  var imgList = $("img[data-flag='flag']");//获取所有的img
  $.each(files, function (i, item) {//正在上传的files(item = 每一个file)
    if(files.length >3){//最多只能上传3张图片
      layer.msg('最多只能上传3张图片',{time:og.ogLayerTime,icon:5});
      return false;
    }

    var objUrl = getObjectURL(item);//每一个files 的file（item）转为路径

    var a = true;//用于过滤掉，页面已经选中的图
    if(imgList.length > 0){//已经有选中的图片
      $.each(imgList, function (j, val) {//已经存在的file 信息存在data-img中
        var fileName = $(val).data("img").name;
        var fileSize = $(val).data("img").size;
        if(fileName == item.name && fileSize == item.size){
          layer.msg('该图已经存在,不能重复上传',{time:og.ogLayerTime,icon:5});
          a = false;
        }
      });
    }

    if(imgList.length >= 3){//最多只能上传3张图片
      layer.msg('最多只能上传3张图片',{time:og.ogLayerTime,icon:5});
      a = false;
    }

    if (a) {
      var html = "";
      html += "<div style='display: inline-block;position:relative;'>";
      html += "<img class='imgSet' style=\"width:100px;height:64px;margin-right:5px;\" data-flag='flag' src='" + objUrl + "'>";
      html += "<span onclick='$(this).parent().remove();' class='deleteButton'style=\"position:absolute;right:8px;top:0;color: red;cursor:pointer;\"><i class='fa fa-window-close'></i></span>";
      html += "</div>";
      $("#imgs").append(html);
      var img = $("#imgs>div").last().children("img");//获取#imgs最后的一个div(新生成)生成的img标签
      img.data("img",item);//将file放到img当中
    }

  })

  $this.val("");//清空刚才选中的图片（PS:bug,因为若选中a，如果重新选择a，就不会再触发change事件所以必须要清空file）
});

//获取文件地址，显示预览用
var getObjectURL = function (file) {
  var url = null;
  if (window.createObjectURL != undefined) {//基础创建url的方法
    //在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,
    // 你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内存.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,
    // 不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
};

//图片过滤
var imgFilter = function (files) {
  var a = true;
  for (var i = 0, file; file = files[i]; i++) {
    if (file.type.indexOf("image") == 0) {//
      if (file.size >= 1048576) {// 1M
        layer.alert('您这张"' + file.name + '"图片过大，应小于1M，请重新上传');
        a = false;
      }
    } else {
      layer.alert('文件"' + file.name + '"不是图片。请重新上传');
      a = false;
    }
  }
  return a;
}

js2:提交图片到后台

 

 

//封装的公用代码片段
var og = {
  //14.判断ie浏览器
  isIE:function(){ //ie?
    if (!!window.ActiveXObject || "ActiveXObject" in window){
      return true;
    }else{
      return false;
    }
  },
//14.1判断ie浏览器
//region //IE6~IE10的浏览器特征明显，存在msie字符串，而IE11去掉了msie字符串，可以通过rv后面的版本号识别IE11
//IETester();//不传参数返回当前IE版本，如果不是IE内核浏览器，返回false
//IETester('Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko');//传userAgent字符串，用来判断其他IE浏览器的版本,该示例返回11.0
  IETester : function(userAgent){
    var UA =  userAgent || navigator.userAgent;
    if(/msie/i.test(UA)){
      return UA.match(/msie (\d+\.\d+)/i)[1];
    }else if(~UA.toLowerCase().indexOf('trident') && ~UA.indexOf('rv')){//~ ~
      return UA.match(/rv:(\d+\.\d+)/)[1];
    }
    //return false; 不是ie就不查了
  }
//原来的函数写法：对于新版的ie11已经不支持了
// function isIE(){
//   if (window.navigator.userAgent.indexOf("MSIE")>=1)
//     return true;
//   else
//     return false;
// }
  ,  //定义全局的layerTime时间
  ogLayerTime:1500,//要引入layui.js
}

//这是提交到后台的代码：
if(og.isIE() && parseInt(og.IETester(navigator.userAgent)) < 10){//小于IE10用这个方法提交
  var options = {
    //target: '#output1',
    data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
    // dataType: null,
    dataType:'json',
//这个参数值的是服务器返回的数据类型，默认的是null
//也就是服务器可以默认返回字符串，然后将这些字符串放在target内部
//当然还有json、xml，其中最常用的便是null和json
//对于json的使用，我们会稍后讲解到
    // beforeSubmit: showRequest,

    type:'post',
    //提交方式，默认是自己在form标签上指定的method
    //如果没有指定，则使用get。
    url:'/user/register',
    //重新提交的url，即url可以在form中配置
    //也可以在这里配置。
    success:function(data){
      if(data){
        alert(data);
      }
      console.log(data);
    }
  };

  $('#designer_form').submit(function() {//这里用了jQuery.form.js 使用方法，请参考：https://www.cnblogs.com/azhw/p/4661838.html
    $(this).ajaxSubmit(options);
    return false;
    //非常重要，如果是false，则表明是不跳转
    //在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
  });


}else{
  //获取图片，放到form中
  var imgList = $("img[data-flag='flag']");//这个图片可能是多张，所以是一个数组
  var formdata = new FormData($("#designer_form")[0]);
  $.each(imgList, function (j, value) {//添加图片到formdata中，我们只要用同一个name提交到后台，java后台接收的时候用循环的方式取出多张图即可
    formdata.append("Image_files", $(value).data("img"));//"Image_files"是后台参数名，图片file数据保存在.data("img")中
  });
  layer.load();
  $.ajax({
    url: "/user/register",
    type: "POST",
    data: formdata,
    cache:false,
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
    success:function(data){
      layer.closeAll("loding");
      if(data.status){
        layer.msg("注册成功",{time:og.ogLayerTime,icon:6});
        $("form").each(function(index,eleDom){//将每个form的数据清空
          eleDom.reset();
        })
      }else{
        layer.alert(data.message);
      }
    },
    error:function(err){
      layer.closeAll("loding");
      layer.alert(err);
    }
  });
}

小结：以上是我的项目中用到的代码，只差IE9提交到后台的那个部分没有实现，后面有时间会补充。

    cache:false,
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
用$.ajax({})提交formdata,一定要设置上面的三个参数，否则jQuery会报匿名非法调用：Uncaught TypeError: Illegal invocation