由SpringMVC實現檔案上傳，前端基於easyui
阿新 • • 發佈：2019-01-23
後臺控制層的方法參考部落格：http://blog.csdn.net/qciwyy/article/details/54017166
本部落格主要講解前臺方法（基於easyui的easyui-filebox控制元件）
一 .easyui-1.4.0前版本使用方法，在這之前easyui沒有easyui-filebox控制元件,使用的是type="file"的方式實現檔案上傳
注意form設定，必須使用form-data傳遞檔案
前端程式碼寫法如下
二.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.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>
<%@ 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> 效果圖
