本文實例講述了Struts2+jquery.form.js實作圖片與檔案上傳的方法。分享給大家參考，具體如下：
jquery.form.js是jQuery的一個官方用語支援非同步上傳檔案的插件。官方網站：http://plugins.jquery.com/form/
結合Struts2三步驟輕鬆實現檔案上傳
通常是針對一個頁面可能不只一個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", // 响应的数据类型
async :true, // 异步
success : function(imageUrl){
//alert(imageUrl);
},
error : function(){
alert("数据加载失败！");
}
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
// 表单输入较验
var title = $("#title");
// 获取textarea的内容
var content = tinyMCE.get('content').getContent();
var msg = "";
if ($.trim(title.val()) == ""){
msg = "公告标题不能为空！";
title.focus();
}else if ($.trim(content) == ""){
msg = "内容不能为空！";
}
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>
好了，從頁面到後台就已經寫完了。這樣就可以上傳了。完畢！
更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖曳特效與技巧總結》、 《jQuery擴充技巧摘要》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。
