本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
