兼容IE8的file单文件上传jquery.form+formdata

文章链接：https://blog.csdn.net/spw55381155/article/details/79891297
IE8后台返回json串会弹框要下载，所以要将响应头设置成‘text/html’.

一、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('<i class="icon-spinner icon-spin text-blue font-20"></i><span class="pl-12 text-blue">上传中</span>');
        $('.btn-sigleFile-upload').attr('disabled',true);
    }
    else
    //IE10及其他浏览器用 FormData上传
    {
        $(".singleFileName").show().empty().html('<i class="icon-spinner icon-spin text-blue font-20"></i><span class="pl-12 text-blue">上传中</span>');
        $('.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
    }
})