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
導入本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", // 響應的數(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程序設計有所幫助。
相關(guān)文章
jquery ui dialog實現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實現(xiàn)彈窗特效的思路及代碼,有需要的朋友可以參考一下2013-08-08
jQuery實現(xiàn)簡單復制json對象和json對象集合操作示例
這篇文章主要介紹了jQuery實現(xiàn)簡單復制json對象和json對象集合操作,結(jié)合實例形式分析了jQuery使用extend方法操作json對象與json對象集合復制相關(guān)技巧,需要的朋友可以參考下2018-07-07
給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接(之一)
我這里用的不是jqGrid的自帶的編輯和刪除操作,我已經(jīng)把分頁導航欄下的編輯,刪除,搜索都取消掉了2011-11-11
jquery插件jquery.beforeafter.js實現(xiàn)左右拖拽分隔條對比圖片的方法
這篇文章主要介紹了jquery插件jquery.beforeafter.js實現(xiàn)左右拖拽分隔條對比圖片的方法,可實現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)字符串按指定長度加入特定內(nèi)容的方法
這篇文章主要介紹了jQuery實現(xiàn)字符串按指定長度加入特定內(nèi)容的方法,實例分析了jQuery操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03

