Struts2+jquery.form.js實現(xiàn)圖片與文件上傳的方法
本文實例講述了Struts2+jquery.form.js實現(xiàn)圖片與文件上傳的方法。分享給大家供大家參考，具體如下：
jquery.form.js是jQuery的一個官方用語支持異步上傳文件的插件。官方網(wǎng)站：http://plugins.jquery.com/form/
結(jié)合Struts2三步輕松實現(xiàn)文件上傳
一般是針對一個頁面可能不止一個Form表單，所以在一個面提交表單會影響到另一個表單，為此，圖片上傳表單就可以使用無刷新提交方式上傳，也就是異步上傳，這時jquery.from.js就派上用場了。
一、HTML
導(dǎo)入本jS到頁面、寫好上傳表單
<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—圖片上傳 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post"
enctype="multipart/form-data">
<input type="file" name="pic" size="30"/><input type="submit" value="上傳"/>
</s:form>
二、JS
// 為表單綁定異步上傳的事件
$(function(){
// 為表單綁定異步上傳的事件
$("#picForm").ajaxForm({
url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 請求的url
type : "post", // 請求方式
dataType : "text", // 響應(yīng)的數(shù)據(jù)類型
async :true, // 異步
success : function(imageUrl){
//alert(imageUrl);
},
error : function(){
alert("數(shù)據(jù)加載失敗！");
}
});
// 為提交按鈕綁定事件
$("#saveBtn").click(function(){
// 表單輸入較驗
var title = $("#title");
// 獲取textarea的內(nèi)容
var content = tinyMCE.get('content').getContent();
var msg = "";
if ($.trim(title.val()) == ""){
msg = "公告標題不能為空！";
title.focus();
}else if ($.trim(content) == ""){
msg = "內(nèi)容不能為空！";
}
msg = "";
if (msg != ""){
alert(msg);
}else{
// 表單提交
$("#noticeForm").submit();
}
});
三、Struts2Action
public class uploadPicAjax extends AbstractAjaxAction {
private static final long serialVersionUID = -4742151106080093662L;
/** Struts2文件上傳的三個屬性 */
private File pic;
private String picFileName;
private String picContentType;
@Override
protected String getJson() throws Exception {
//獲取項目部署的路徑
String realPath = ServletActionContext.getServletContext()
.getRealPath("/images/notice");
//生成新的文件名
String newFileName = UUID.randomUUID().toString()+"."
+FilenameUtils.getExtension(picFileName);// 獲取文件的后綴名 aa.jpg --> jpg
FileUtils.copyFile(pic, new File(realPath + File.separator + newFileName));
return "/images/notice/" + newFileName;
}
/** setter and getter method **/
......
}
四、配置Struts2.xml
<!-- 圖片的異步上傳 --> <action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax"> </action>
好了，從頁面到后臺就已經(jīng)寫完了。這樣就可以上傳了。完畢！
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
本文講解了JQuery切換顯示的效果實例代碼，需要的朋友可以參考一下2013-02-02
jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實例詳解
這篇文章主要介紹了jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法,結(jié)合實例形式詳細分析了綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind的具體使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-01-01
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹，需要的朋友可以參考下2012-11-11
這篇文章主要介紹了一款基于jQuery的圖片場景標注提示彈窗特效,需要的朋友可以參考下2015-01-01
jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法
這篇文章主要介紹了jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了jQuery操作百葉窗翻滾效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery插件PageSlide實現(xiàn)左右側(cè)欄導(dǎo)航菜單
jQuery pageSlide 是一個可以讓網(wǎng)頁出現(xiàn)滾動效果的jQuery插件，它可以控制一個隱藏頁面的顯示和關(guān)閉。具體來說，就是當前頁占一個完整頁面，隱藏頁是看不到的，你設(shè)置一個控制的地方，點擊該控制時觸發(fā)事件，隱藏的頁面就滑出來，再次點擊隱藏頁面以外的地方，它就又關(guān)閉2015-04-04
密碼框的顯示隱藏有多種實現(xiàn)方法，在將為大家介紹下如何使用jquery實現(xiàn)，感興趣的朋友可以參考下2013-09-09
jQuery-Easyui 1.2 實現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實現(xiàn)多級菜單2012-01-01
把jquery 的dialog和ztree結(jié)合實現(xiàn)步驟
首先準備好juqury-ui、ztree 的js文件和css 文件，接下來的步驟祥看本文希望對大家有所幫助2013-08-08
本節(jié)主要介紹了jQuery如何獲取節(jié)點和子節(jié)點文本，下面有個示例，大家可以參考下2014-07-07