使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
使用的技術(shù)有jquery.form.js框架， 以及springmvc框架。主要實(shí)現(xiàn)異步文件上傳的同時(shí)封裝對(duì)象，以及一些注意事項(xiàng)。
功能本身是很簡(jiǎn)單的，但是涉及到一些傳遞參數(shù)類型的問(wèn)題。例如：jquery的ajax方法與jquery.form.js中的ajaxSubmit方法的參數(shù)，具體細(xì)節(jié)將在下一篇博客中分享。
重點(diǎn)： html表格三要素： action="fileUpload/fileUpload" method="post" enctype="multipart/form-data";
1. 最簡(jiǎn)單的表單直接提交
html代碼：
<body> <form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data"> <input type="text" name="password"> <input type="file" name="file"> <input type="text" name="username"> <input type="submit" value="submit"> </form> <button id="button">提交</button> </body>
java代碼（具體的springmvc配置，包括文件上傳的配置參考http://www.dhdzp.com/article/84078.htm）
@Controller
@RequestMapping("/fileUpload")
public class FileUpload {
@RequestMapping("/fileUpload")
@ResponseBody
public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){
System.out.println("------------------------------- "+ file.getSize());
if(!file.isEmpty()){
System.out.println("Process file: "+file.getOriginalFilename() );
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}
}
return "NewFile";
}
}
2. 使用jquery.form.js的ajaxSubmit方法
html代碼以及java代碼保持不變，給id=button的按鈕添加事件
$("#button").click(function(){
var hideForm = $('form');
var options = {
dataType : "json",
/*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/
beforeSubmit : function() {
alert("正在上傳");
},
success : function(result) {
alert('成功上傳！');
},
error : function(result) {
}
};
hideForm.ajaxSubmit(options);
});
3. 在后臺(tái)使用一個(gè)User對(duì)象接收username和password。
<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="submit"> </form>
有可能你會(huì)按照下面的步驟做： 封裝表單數(shù)據(jù)作為一個(gè)json對(duì)象， 給上面的js代碼添加data
data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}
在此處其實(shí)是畫蛇添足，這種情況下發(fā)送的請(qǐng)求的詳細(xì)情況如圖：
此時(shí)頁(yè)面會(huì)報(bào)錯(cuò)415。
--------------------------------------------------------------
最合理的代碼應(yīng)該是：html代碼與1相同， js代碼與2相同， java代碼
public String FileUpload1(@RequestParam("file")MultipartFile file, User user){
而且User、前面不能加@RequestBody.。
以上內(nèi)容是小編給大家介紹的使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能，希望對(duì)大家有所幫助，如果大家想了解更多精彩內(nèi)容，敬請(qǐng)關(guān)注腳本之家網(wǎng)站！
- SpringMVC文件上傳 多文件上傳實(shí)例
- SpringMVC 文件上傳配置，多文件上傳，使用的MultipartFile的實(shí)例
- jquery.form.js框架實(shí)現(xiàn)文件上傳功能案例解析（springmvc）
- SpringMvc MultipartFile實(shí)現(xiàn)圖片文件上傳示例
- springMVC實(shí)現(xiàn)前臺(tái)帶進(jìn)度條文件上傳的示例代碼
- SpringMVC使用MultipartFile實(shí)現(xiàn)文件上傳
- MyBatis與SpringMVC相結(jié)合實(shí)現(xiàn)文件上傳、下載功能
- springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)
- SpringMVC文件上傳的配置實(shí)例詳解
- springmvc實(shí)現(xiàn)文件上傳功能
相關(guān)文章
jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼
現(xiàn)在比較流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的寫代碼了。2011-03-03
ScrollToFixed (jquery Fixed plugin)能夠讓網(wǎng)頁(yè)的導(dǎo)航或表頭等固定在頂部或底部，讓用戶更方便的操作或查看信息。除了導(dǎo)航和表頭，也可以固定其他內(nèi)容，比如廣告、返回頂部等等。2015-04-04
jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼,涉及jquery鼠標(biāo)事件操作頁(yè)面元素的遍歷與樣式動(dòng)態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery輕松實(shí)現(xiàn)無(wú)縫輪播效果
這篇文章主要為大家詳細(xì)介紹了jQuery輕松實(shí)現(xiàn)無(wú)縫輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Jquery調(diào)用webService遠(yuǎn)程訪問(wèn)出錯(cuò)的解決方法
原來(lái)web.config里面默認(rèn)Post設(shè)置是不允許遠(yuǎn)程調(diào)用webservice，需要配置一下就可以了2010-05-05
用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
使用Jquery實(shí)現(xiàn)可編輯的表格 并使用AJAX提交到服務(wù)器修改數(shù)據(jù)的實(shí)現(xiàn)代碼。2009-12-12
jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
本文將利用jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大和縮小。說(shuō)明: 頁(yè)面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問(wèn)題設(shè)計(jì)2014-02-02