由SpringMVC实现文件上传，前端基于easyui
zmysna 2018-10-30
后台控制层的方法参考博客：http://blog.csdn.net/qciwyy/article/details/54017166
本博客主要讲解前台方法（基于easyui的easyui-filebox控件）
一 .easyui-1.4.0前版本使用方法，在这之前easyui没有easyui-filebox控件,使用的是type="file"的方式实现文件上传
注意form设置，必须使用form-data传递文件
前端代码写法如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="${ctx }/static/js/jquery-easyui-1.3.4/demo/demo.css" />
<script type="text/javascript" src="jquery-easyui-1.3.4/locale/easyui-lang-en.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/ajaxfileupload.js"></script>
</head>
<body>
<form id="importFileForm" method="post" enctype="multipart/form-data">
<table style="margin:5px;height:70px;">
<tr>
<td><input type="file" class="easyui-filebox" id="file" name="file" style="width:260px;"></td>
</tr>
<tr>
<td><label id="fileName"></label></td>
</tr>
<tr>
<td>
<label id="uploadInfo"></label>
</td>
</tr>
</table>
<div style="text-align:center;clear:both;margin:5px;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="importFileClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.upload"/></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeImportClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.qk"/></a>
</div>
</form>
<script type="text/javascript">
//关闭导入弹出窗口
this.closeImportClick = function () {
document.getElementById('file').value = null;
document.getElementById('fileName').innerHTML = "";
document.getElementById('uploadInfo').innerHTML = "";
$('#import-excel-template').window('close')
}
//导入文件
function importFileClick()
{
//获取上传文件控件内容
var file = document.getElementById('file').files[0];
//判断控件中是否存在文件内容，如果不存在，弹出提示信息，阻止进一步操作
if (file == null) { alert('错误，请选择文件'); return; }
//获取文件名称
var fileName = file.name;
//获取文件类型名称
var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
//这里限定上传文件文件类型必须为.xlsx，如果文件类型不符，提示错误信息
if (file_typename == '.xml')
{
//计算文件大小
var fileSize = 0;
//如果文件大小大于1024字节X1024字节，则显示文件大小单位为MB，否则为KB
if (file.size > 1024 * 1024) {
fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;
if (fileSize > 10) {
alert('错误，文件超过10MB，禁止上传！'); return;
}
fileSize = fileSize.toString() + 'MB';
}
else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
//将文件名和文件大小显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>";
//获取form数据
var formData = new FormData($("#importFileForm")[0]);
//调用apicontroller后台action方法，将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
$.ajax({
url:'${ctx}/dataEntryXML/getGafXmlData',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returnInfo) {
//上传成功后将控件内容清空，并显示上传成功信息
document.getElementById('file').value = null;
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
},
error: function (returnInfo) {
//上传失败时显示上传失败信息
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
}
});
}
else {
alert("文件类型错误");
//将错误信息显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>"
}
}
</script>
</body>
</html>
二.easyui-1.4.0之后的版本可以使用easyui的easyui-filebox控件实现文件上传。前端代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.0/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.0/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="${ctx }/static/js/jquery-easyui-1.4.0/demo/demo.css" />
<script type="text/javascript" src="jquery-easyui-1.4.0/locale/easyui-lang-en.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/ajaxfileupload.js"></script>
</head>
<body>
<form id="importFileForm" method="post" enctype="multipart/form-data">
<table style="margin-left:30px;margin-top:15px;height:70px;">
<tr>
<td><spring:message code="gafdataentrytxt.fileformat"/>:</td>
<td></td>
<td>XML,TXT</td>
</tr>
<tr>
<td><spring:message code="gafdataentrytxt.pleaseselectfile"/>:</td>
<td></td>
<td><input class="easyui-filebox" id="fileImport" name="fileImport" data-options="prompt:'Choose a file...'" style="width:250px;height:25px;"></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><label id="fileName"></label></td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<label id="uploadInfo"></label>
</td>
</tr>
</table>
<%-- <div style="text-align:center;clear:both;margin:5px;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="importFileClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.upload"/></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeImportClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.qk"/></a>
</div> --%>
</form>
<script type="text/javascript">
//关闭导入弹出窗口
function closeImportClick(){
$('#fileImport').filebox('setValue','');
document.getElementById('fileImport').value = null;
document.getElementById('fileName').innerHTML = "";
document.getElementById('uploadInfo').innerHTML = "";
$('#dd').dialog('close');
}
//导入文件
function importFileClick()
{
//获取上传文件控件内容。根据实际情况需要file对象的获取方式有如下两种方法，filebox_file_id_这个是easyui自己封装的文件上传id，可以在
jquery.easyui.min.js这个js文件中搜到.所以你在input里面写的id=“aa”是没有实际意义的，故用如下两种方式获取。
var file = $('input[name="fileImport"][type="file"]').prop('files')[0];
/*var file = document.getElementById('filebox_file_id_1').files[0];*/
//判断控件中是否存在文件内容，如果不存在，弹出提示信息，阻止进一步操作
if (file == null) { alert('错误，请选择文件'); return; }
//获取文件名称
var fileName = file.name;
//获取文件类型名称
var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
//这里限定上传文件文件类型必须为.xlsx，如果文件类型不符，提示错误信息
if (file_typename == '.xml')
{
//计算文件大小
var fileSize = 0;
//如果文件大小大于1024字节X1024字节，则显示文件大小单位为MB，否则为KB
if (file.size > 1024 * 1024) {
fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;
if (fileSize > 10) {
alert('错误，文件超过10MB，禁止上传！'); return;
}
fileSize = fileSize.toString() + 'MB';
}
else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
//将文件名和文件大小显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>";
//获取form数据
var formData = new FormData($("#importFileForm")[0]);
//调用apicontroller后台action方法，将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
$.ajax({
url:'${ctx}/dataEntryXML/getGafXmlData',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returnInfo) {
//上传成功后将控件内容清空，并显示上传成功信息
document.getElementById('file').value = null;
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
},
error: function (returnInfo) {
//上传失败时显示上传失败信息
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
}
});
}
else {
alert("文件类型错误");
//将错误信息显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>"
}
}
</script>
</body>
</html>
效果图
