画像とファイルを実装するための Struts2+jquery.form.js メソッド Upload_jquery

この記事の例では、Struts2+jquery.form.jsを使用して画像やファイルをアップロードする方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

jquery.form.js は、非同期ファイルのアップロードをサポートする公式の jQuery プラグインです。公式ウェブサイト:http://plugins.jquery.com/form/

Struts2 と組み合わせると 3 ステップで簡単にファイルをアップロードできます

一般に、ページには複数のフォーム フォームがある場合があるため、一方のフォームを送信すると別のフォームに影響を与えるため、画像アップロード フォームは非更新の送信方法を使用してアップロードできます。このとき、jquery .from.js が便利です。

1. 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>

2.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();
    }
});

3. 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 **/
    ......
}

4. Struts2.xml を設定します

<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>

さて、ページからバックエンドまでの書き込みが完了しました。その後、アップロードできます。完了！

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「JQuery スイッチングのエフェクトとテクニックの概要」、「jQuery のドラッグ エフェクトとテクニックの概要」を参照してください。 ", "JQuery 拡張スキルまとめ", "jQuery 共通古典特撮まとめ", "jQuery アニメーションと特殊効果の使い方まとめ", " jQuery セレクターの使い方まとめ " および "jQuery の共通プラグインと使い方のまとめ "

この記事が jQuery プログラミングのすべての人に役立つことを願っています。