1.講真,文件上傳現在很少有人自己用 input type=”file” ,這個標籤來自己手動寫上傳過程,一般都是使用了插件,美觀,而且裏面對各種需求的實現等都有很大的不同。但是今天還是用這個標籤來說明文件上傳。
2.首先是配置文件的處理
<!-- 處理文件上傳 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--配置文件根據你的需求來配置
//配置上傳文件編碼
<property name="defaultEncoding" value="UTF-8"/>
//配置文件大小的最大值
<property name="maxUploadSize" value="10000000"/>-->
</bean>
3.然後是前臺頁面的實現,使用input標籤
<form action="" method="post" id="fo" enctype="multipart/form-data">
<table >
<tr>
<td class="t_txt">選擇文件:</td>
<td>
<input type="file" title="選擇要導入的文件" name="files" id="fload" multiple="multiple" />
<input id="pBtn" type="button" value="導入" onclick="upload_excel()" />
</td>
</tr>
</table>
</form>
//點擊瀏覽選擇文件,點擊導入提交到後臺。
//multiple="multiple",在input屬性裏面添加這一行,表示可以進行
多文件上傳,不然就只能上傳單文件。
//enctype="multipart/form-data"表示後臺是multipartfile來處理
然後是js代碼控制,基於jquery
<script type="text/javascript">
function upload_excel(){
var fileNode = $("#fload");//獲取選擇的文件名
if($.trim(fileNode.val()) == ""){
alert("請選擇導入文件");
return;
}
v_file(fileNode.val());
}
//驗證文件格式問題,這裏只讓上傳excel
function v_file(val){
//獲取選擇文件的名字的長度(.+格式 之前的部分)
var frontPart = val.lastIndexOf(".");
//檢索字符串爲空,則該方法返回 -1
if(frontPart == -1){
alert("文件名有誤,請檢查");
return false;
}
//截取文件名後面的部分(.+格式)
var lastPart = val.substring(frontPart);
//這裏判斷格式爲xls,xlsx才讓上傳
if(lastPart != ".xls" && lastPart != ".xlsx"){
alert("文件格式有誤:請上傳.xls或.xlsx類型文件");
return false;
}
//提交表單到後臺
$("#editForm").ajaxSubmit(function(data){
alert(data.message);//彈出成功或者失敗的信息
//window.location.reload();//選擇頁面刷新
});
}
</script>
4.後臺處理部分
@RequestMapping("")
@ResponseBody
public Result tlist(HttpServletRequestrequest,HttpServletResponse response, @RequestParam(value="files",required = false) MultipartFile[] files) throws FileNotFoundException,IOException {
//上面的MultipartFile[] files爲數組來接收多文件
// @RequestParam(value="files",required = false)註解必須要
if(files != null && files.length>0){
Result result = new Result();
//遍歷數組
for(int i=0;i<files.length;i++){
//將每一個文件分別放入file中
MultipartFile file = files[i];
//進入上傳文件方法
result = saveFile(file,request);
if(result.isSuccess() == false){
return result;
}
}
return result;
}
return new Result("",false,"上傳內容爲空");
}
//上傳文件方法
private Result saveFile(MultipartFilefile,HttpServletRequest request){
if (!file.isEmpty()) {
try {
// 文件保存路徑
String filePath= request.getSession().getServletContext().getRealPath("/") +(後面是root下一級目錄開始) "resources/test/";
//獲取文件名
String fileName = file.getOriginalFilename();
File tagetFile = new File(filePath,fileName);
// 轉存文件
file.transferTo(tagetFile);
return new Result("",true,"上傳成功");
} catch (Exception e) {
e.printStackTrace();
return new Result("",false,"有異常,請處理");
}
}
return new Result("",false,"上傳失敗");
}
//這裏Result是自定義的一個結果類
5.至此,文件上傳成功,如果想上傳其他的,在js判斷的時候,選擇你要的文件類型,至於單文件的上傳,前面input屬性去掉multiple=”multiple”,後臺用MultipartFile files接收就可以了,我試過了excel,圖片都沒有問題。後續有問題再補充。