ie8 html5上传,兼容IE8的file单文件上传（jquery.form+formdata）

一、HTML

//防止表单重复提交，看需求

//高版本只选择.xls或.xlsx

二、CSS

用定位将文件弹框隐藏在上传按钮之上

三、JS(IE10以上用formData,以下用jquery.form.js)

//下载地址：http://malsup.com/jquery/form/

//将字符串转为json，IE10以下用法

function strToJson(str){

var json = (new Function("return " + str))();

return json;

}

//按钮点击事件

$(".btn-sigleFile-upload").on('click',function(){

//判断浏览器版本(其他文章有)

var ieVersion=IEVersion();

var filePath = $(".hidden-single-file").val();

//非空判断

if(!filePath){

$(".singleFileName").html("").hide();

$(".singleErrorTips").html("未选择文件").show();

return false

}

//低版本上传

if(ieVersion==6 || ieVersion==7 || ieVersion==8 || ieVersion==9 || ieVersion==10){

$('.btn-sigleFile-upload').removeAttr("disabled");

$(".singleFileName").empty().hide();

var option={

success: function (response) {

$(".singleErrorTips").hide().append(response);

var aaa=$(".singleErrorTips pre").html();

var responseType=strToJson(aaa);

if (responseType.status == 200) {

$(".singleFileName").empty();

$(".singleErrorTips").empty();

$('.btn-sigleFile-upload').removeAttr("disabled");

layer.msg(responseType.message, {icon: 1}), function () {

location.reload();

}

} else {

$(".singleFileName").empty();

$(".singleErrorTips").empty();

$('.btn-sigleFile-upload').removeAttr("disabled");

layer.msg(responseType.message, {icon: 5}, function () {

location.reload();

});

}

},

error: function (message, textStatus) {

alert('error');

layer.close(index); //如果设定了yes回调，需进行手工关闭

$('.btn-sigleFile-upload').removeAttr("disabled");

}

};

//IE8版本用jquery.form.js的ajaxSubmit来提交

$('.uploadForm').ajaxSubmit(option);

$(".singleFileName").show().empty().html('上传中');

$('.btn-sigleFile-upload').attr('disabled',true);

}

else

//IE10及其他浏览器用 FormData上传

{

$(".singleFileName").show().empty().html('上传中');

$('.btn-sigleFile-upload').attr('disabled',true);

var data = new FormData();

data.append('_token', $('input[name="_token"]').val());

data.append('file', $('.hidden-single-file')[0].files[0]);

$.ajax({

url: XXX',

type: 'post',

cache: false,

processData: false,

contentType: false,

data: data,

success: function (response) {

···response=eval("(" + response+ ")")

if (response.status == 200) {

$(".singleFileName").empty();

$(".singleErrorTips").empty();

$('.btn-sigleFile-upload').removeAttr("disabled");

layer.msg(response.message, {icon: 1}, function () {

location.reload();

})

} else {

$(".singleFileName").empty();

$(".singleErrorTips").empty();

$('.btn-sigleFile-upload').removeAttr("disabled");

layer.msg(response.message, {icon: 5});

}

},

error: function (message, textStatus) {

alert('error');

layer.close(index);

$(".singleFileName").empty();

$(".singleErrorTips").empty();

}

})

}

})

//单选file的onchange验证

$(".hidden-single-file").on("change", function () {

var filePath = $(this).val();

if(!filePath){

$(".singleFileName").html("").hide();

$(".singleErrorTips").html("未选择文件").show();

return false

}

if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {

$(".singleErrorTips").html("").hide();

var arr=filePath.split('\\');

var fileName=arr[arr.length-1];

$(".singleFileName").show().html(fileName);

} else {

$(".singleFileName").html("").hide();

$(".singleErrorTips").html("您上传文件类型有误！请选择.xls或者.xlsx类型的文件").show();

return false

}

})

标签：jquery,IE8,form,function,html,singleFileName,singleErrorTips,var,empty

来源： https://blog.csdn.net/qq_42708369/article/details/87941186