springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項
在使用easyUI做前端樣式展示時，遇到了文件上傳的問題，而且是在彈出層中提交表單，想做到不刷新頁面，所以選擇了使用ajaxFileUpload插件。提交表單時一直發(fā)現(xiàn)后臺接收不到文件，后檢查發(fā)現(xiàn)，原來是文件的id不對。
文件上傳框我們定義如下：
<input class="easyui-filebox" id="image" name="image" data-options="label:'產(chǎn)品圖片:',buttonText:'瀏覽',prompt:'僅支持jpg、gif、png等格式的圖片',required:true">
提交的方式如下：
$.ajaxFileUpload({
type:'POST',
url : '${pageContext.request.contextPath}/product/saveProduct',
secureuri : false,
data : queryFormParam('#formId'),//需要傳遞的數(shù)據(jù) json格式
fileElementId :'image',
dataType : 'json',
success : function(data) { //上傳成功后的回調(diào)。
if(data.status){
$.messager.alert("提示","保存成功");
}else {
$.messager.alert("提示","保存失敗");
}
},
error : function(data) {
$.messager.alert("提示","異常，請稍后再試！");
}
});
檢查后發(fā)現(xiàn)，因easyui-filebox樣式使用時，easyUI的js會為其創(chuàng)建一個type="file"的input，并且id也是easyUI定義的，自定義的id無效，可在easyUI的jquery.easyui.min.js中查看代碼如下：
(function($){
var _551=0;
function _552(_553){
var _554=$.data(_553,"filebox");
var opts=_554.options;
opts.fileboxId="filebox_file_id_"+(++_551);
$(_553).addClass("filebox-f").textbox(opts);
$(_553).textbox("textbox").attr("readonly","readonly");
_554.filebox=$(_553).next().addClass("filebox");
var file=_555(_553);
var btn=$(_553).filebox("button");
if(btn.length){
$("<label class=\"filebox-label\" for=\""+opts.fileboxId+"\"></label>").appendTo(btn);
if(btn.linkbutton("options").disabled){
file.attr("disabled","disabled");
}else{
file.removeAttr("disabled");
}
}
};
function _555(_556){
var _557=$.data(_556,"filebox");
var opts=_557.options;
_557.filebox.find(".textbox-value").remove();
opts.oldValue="";
var file=$("<input type=\"file\" class=\"textbox-value\">").appendTo(_557.filebox);
file.attr("id",opts.fileboxId).attr("name",$(_556).attr("textboxName")||"");
file.attr("accept",opts.accept);
if(opts.multiple){
file.attr("multiple","multiple");
}
file.change(function(){
var _558=this.value;
if(this.files){
_558=$.map(this.files,function(file){
return file.name;
}).join(opts.separator);
}
$(_556).filebox("setText",_558);
opts.onChange.call(_556,_558,opts.oldValue);
opts.oldValue=_558;
});
return file;
};
表單中可以定義多個filebox，并且filebox的id為filebox_file_id_+序號，如果只有一個，那就是filebox_file_id_1，因我這邊只有一個，然后將ajaxFileUpload提交時的fileElementId 改成‘filebox_file_id_1'，后臺就接收到image值了。
這個是看源碼知道的，如果不看源碼，其實可以直接用jQuery的方式獲得id,如下：
var image_id= $("input[name='image']").attr("id");
因image名字在我的表單中是唯一的，所以通過名字來獲得id,然后將id填入ajaxFileUpload的fileElementId 中即可達到同樣的效果。
springMVC后臺采用的是CommonsMultipartFile來接收文件，如下，得到路徑后，用image.transferTo(saveDir);保存即可。
@RequestParam("image") CommonsMultipartFile image
以上所述是小編給大家介紹的springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- SpringMVC文件上傳 多文件上傳實例
- SpringMVC 文件上傳配置，多文件上傳，使用的MultipartFile的實例
- jquery.form.js框架實現(xiàn)文件上傳功能案例解析（springmvc）
- SpringMvc MultipartFile實現(xiàn)圖片文件上傳示例
- 使用jQuery.form.js/springmvc框架實現(xiàn)文件上傳功能
- springMVC實現(xiàn)前臺帶進度條文件上傳的示例代碼
- SpringMVC使用MultipartFile實現(xiàn)文件上傳
- MyBatis與SpringMVC相結(jié)合實現(xiàn)文件上傳、下載功能
- SpringMVC文件上傳的配置實例詳解
- springmvc實現(xiàn)文件上傳功能
相關(guān)文章
JavaScript isArray()函數(shù)判斷對象類型的種種方法
我們知道，JavaScript中檢測對象類型的運算符有：typeof、instanceof，還有對象的constructor屬性2010-10-10
這篇文章主要為大家詳細介紹了微信小程序自定義模態(tài)彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化實例詳解
這篇文章主要介紹了js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化方法,以實例形式較為詳細的分析并總結(jié)了JavaScript數(shù)組的常見使用技巧與轉(zhuǎn)化方法,需要的朋友可以參考下2015-11-11
在java中有private屬性，強大的功能js不能實現(xiàn)就矮人一截，匿名函數(shù)，發(fā)揚廣大2010-09-09
這篇文章主要介紹了JS彈出窗口插件zDialog簡單用法,結(jié)合簡單實例形式分析了zDialog插件彈出窗口的基本使用方法與參數(shù)含義,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js實現(xiàn)文字頭像的生成的代碼，代碼簡單易懂，非常不錯，對大家的工作或?qū)W習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
onmouseover事件和onmouseout事件全面理解
最近兩天在溫習(xí)onmouseover事件和onmouseout事件，其實里面有很多深奧的知識，接下來小編給大家?guī)砹薿nmouseover事件和onmouseout事件全面了解，感興趣的朋友一起看下2016-08-08
前端接口報錯Required?request?body?is?missing解決辦法
這篇文章主要給大家介紹了關(guān)于前端接口報錯Required?request?body?is?missing的解決辦法,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
echarts柱狀圖坐標(biāo)軸內(nèi)容顯示不全的兩種解決辦法
本文主要介紹了echarts柱狀圖坐標(biāo)軸內(nèi)容顯示不全的兩種解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
下面小編就為大家?guī)硪黄獪\談JS繼承_寄生式繼承 & 寄生組合式繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08