兼容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提交到后台的那个部分没有实现，后面有时间会补充。