欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法

 更新時間：2016年05月05日 11:08:51   作者：月上西樓  
這篇文章主要介紹了Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.form.js插件實(shí)現(xiàn)前臺圖片上傳提交及Struts2進(jìn)行后臺處理的相關(guān)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法。分享給大家供大家參考，具體如下：

jquery.form.js是jQuery的一個官方用語支持異步上傳文件的插件。官方網(wǎng)站：http://plugins.jquery.com/form/

結(jié)合Struts2三步輕松實(shí)現(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(){
    // 表單輸入較驗(yàn)
    var title = $("#title");
    // 獲取textarea的內(nèi)容
    var content = tinyMCE.get('content').getContent();
    var msg = "";
    if ($.trim(title.val()) == ""){
        msg = "公告標(biāo)題不能為空！";
        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 {
        //獲取項(xiàng)目部署的路徑
        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擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論