이미지 및 파일 upload_jquery를 구현하는 Struts2+jquery.form.js 메소드

이 기사의 예에서는 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. 스트럿츠2액션

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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.