最近在来了一个需求，前后端不分离的项目，要求兼容IE5的文件上传
这个需要用到jquery的form插件，所以是需要引入这个form插件，才能用ajaxSubmit这个方法的
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/jquery.form.js"></script>
在IE5下，后台返回json数据，浏览器会弹出下载框，
下载的是一个json文件，内容是后端返回回来的数据。
此时前端是没办法进入success回调的
所以需要后端修改返回数据的格式，就可以解决这个问题了。
上传成功的请求头和响应头信息
下面是整个页面代码（jsp页面）
<%@ page language="java" contentType="text/html; charset=GBK" isErrorPage="true"%>
<% String appPath = request.getContextPath();%>
<html>
<head>
<title>号码中断管理</title>
<link rel="stylesheet" type="text/css" href="<%=appPath%>/jquery-easyui-1.5.5.1/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=appPath%>/jquery-easyui-1.5.5.1/themes/icon.css">
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/jquery.form.js"></script>
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/tools.js"></script>
<script type="text/javascript" src="<%=appPath%>/jquery-easyui-1.5.5.1/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem label {
display: inline-block;
width: 80px;
}
label {
display: block;
text-align: right;
}
</style>
<script>
$(function(){
//日期框输入框初始化
$('#uploadDateQuery').datebox();
$('#uploadDateQuery').datebox('setValue', new Date().Format("yyyy-MM-dd"));
$('#data').datagrid({
url:'<%=appPath%>/interrupt/query.do?r=' + getRandom(),
columns:[[
{field:'number',title:'电话号码',width: 200},
{field:'createTime',title:'导入时间',width:250},
{field:'status',title:'中断状态',width:200}
]],
idField:'id',
singleSelect:false,
pagination:true,
onLoadSuccess: function(data) {
if (!data.success) {
alert(data.msg);
}
},
onLoadError: function() {
alert("加载失败");
},
toolbar:[{
id:'btn-add',
text:'导入',
iconCls:'icon-redo',
handler:function(){
$("#fmUpload").form("clear");
$("#uploadDlg").dialog("open").dialog('setTitle', '导入');
}
}]
});
var p = $('#data').datagrid('getPager');
$(p).pagination({
onSelectPage:function(pageNumber, pageSize){
$('#data').datagrid('loading');
$.post("<%=appPath%>/interrupt/query.do?r=" + getRandom(),
{page: pageNumber, rows: pageSize,
number: $('#numQuery').val(),
createTime: $('#uploadDateQuery').val()},
function(data){
if (data.success) {
$('#data').datagrid('loadData', data);
} else {
alert(data.msg);
}
$('#data').datagrid('loaded');
},"json");
}
});
$("#clearQuery").bind('click', function() {
$('#fmQuery').form('clear');
$('#uploadDateQuery').datebox('setValue', new Date().Format("yyyy-MM-dd"));
});
$("#submitQuery").bind('click', function() {
var formData = $("#fmQuery").serialize()+"&page=1&rows=10";
console.log(formData)
$('#data').datagrid('loading');
$.post("<%=appPath%>/interrupt/query.do?r=" + getRandom(),
formData, function(data){
if (data.success) {
$('#data').datagrid('loadData', data);
} else {
alert(data.msg);
}
$('#data').datagrid('loaded');
},"json");
});
$("#uploadBtn").bind('click', function() {
//得到上传文件的全路径
var fileName = $('#uploadFiles').filebox('getValue');
//进行基本校验
if (fileName == "") {
$.messager.alert('提示', '请选择上传文件！', 'info');
} else {
//对文件格式进行校验
var d1 = /\.[^\.]+$/.exec(fileName);
if (d1 == ".csv") {
$("#uploadBtn").linkbutton('disable');
//提交表单
$('#fmUpload').ajaxSubmit({//ajax方式提交表单
url: '<%=appPath%>/interrupt/upload.do?r=' + getRandom(),
type: 'post',
dataType: 'text',
beforeSubmit: function () { },
success: function (data) {
try {
var obj = jQuery.parseJSON(data);
} catch (e) {
alert(e.name + ": " + e.message);
}
var resultInfo = "";
if (obj.success) {
resultInfo = "上传成功" ;
} else {
resultInfo = obj.msg;
}
$.messager.alert('提示', resultInfo, 'info');
$('#uploadDlg').dialog('close');
$('#data').datagrid('reload',{
number: $('#numQuery').val(),
createTime: $('#uploadDateQuery').val()
});
$("#uploadBtn").linkbutton('enable');
},
error: function(xhr, status, err) {
alert("操作失败: status=" + status + " err=" + err); // 访问地址失败，或发生异常没有正常返回
clearForm: false,//禁止清楚表单
resetForm: false //禁止重置表单
});
} else {
$.messager.alert('提示', '请选择csv格式文件！', 'info');
$('#uploadFiles').filebox('setValue', '');
}
}
});
$("#cancelUploadBtn").bind('click', function() {
$('#uploadDlg').dialog('close');
$('#data').datagrid('reload', {
number: $('#numQuery').val(),
createTime: $('#uploadDateQuery').val()
});
});
});
</script>
</head>
<body class="easyui-layout"><div region="north" title="查询条件" split="true" style="height:100px;"> <div style="margin-top: 10px; margin-left: 10px;"> <form id="fmQuery" method="post" novalidate> <span>电话号码:</span> <input class="easyui-validatebox" type="text" name="number" id="numQuery" style="line-height: 26px; border: 1px solid #ccc"></input> <span>导入日期:</span> <input class="easyui-validatebox" type="text" name="createTime" id="uploadDateQuery" style="line-height: 26px; border: 1px solid #ccc"></input> <a id="clearQuery" class="easyui-linkbutton" iconCls="icon-clear">清空</a> <a id="submitQuery" class="easyui-linkbutton" iconCls="icon-search">查询</a> </form> </div></div><div region="center" title="查询列表" split="true" > <table id="data"></table></div><%--修改配置参数的div--%><div id="uploadDlg" class="easyui-dialog" style="width: 600px; height: 380px; padding: 10px 20px;left: 250px;top:100px;" closed="true" buttons="#uploadDlg-buttons"> <div class="ftitle"> 导入文件 </div> <form id="fmUpload" method="post" enctype="multipart/form-data"> <input id="uploadFiles" name="files" class="easyui-filebox" style="width:200px" data-options="prompt:'请选择文件...',buttonText: '选择文件'"> <a href="javascript:void(0)" class="easyui-linkbutton" id="uploadBtn" iconcls="icon-redo" plain="true">导入</a> </form></div><div id="uploadDlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton" id="cancelUploadBtn" iconcls="icon-cancel">取消</a></div></body>
