這篇文章主要介紹了Struts2+jquery.form.js實現圖片與文件上傳的方法,結合實例形式詳細分析了jquery.form.js插件實現前臺圖片上傳提交及Struts2進行后臺處理的相關步驟與實現技巧,需要的朋友可以參考下

本文實例講述了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>

好了，從頁面到后臺就已經寫完了。這樣就可以上傳了。完畢！