java - 在Java Struts 2中使用ajax/jquery将图像上传到服务器后，如何自动将图像加载到<div>中而不刷新页面？

Question

当我尝试将图像自动加载到标签中而不在图像上传到服务器后刷新页面时遇到问题。我的项目是Java、Struts 2框架。

这是上传文件模型。 (文件上传.java)

package com.model;

import java.io.File;
import org.apache.struts2.ServletActionContext;

public class FileUpload {

    public String moveTo(String folder) {
        this.moveTo(folder, fileFileName);
        return fileFileName;
    }

    public void moveTo(String folder, String fileName){
        String fullpath = ServletActionContext.getServletContext().getRealPath(folder);
        File newFile = new File(fullpath, fileName);
        if(newFile.exists()){
            newFile.delete();
        }
        file.renameTo(newFile);
    }

    public boolean hasFile() {
        return file != null && file.length() > 0;
    }

    public File file;
    public String fileFileName, fileContentType;
    public File getFile() {
        return file;
    }

    public void setFile(File file) {
        this.file = file;
    }

    public String getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(String fileFileName) {
        this.fileFileName = fileFileName;
    }

    public String getFileContentType() {
        return fileContentType;
    }

    public void setFileContentType(String fileContentType) {
        this.fileContentType = fileContentType;
    }

}

<小时/>

这是上传文件的Action。 (FileUploadAction.java)

package com.action;

import java.io.File;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;
import com.ratngon.model.FileUpload;

@Results(value={
        @Result(name="input", location="/home/UserRegister.jsp"),
        @Result(name="success", location="/home/UserRegister.jsp")
})
public class FileUploadAction extends ActionSupport implements ServletRequestAware {
    // fileUpload variable  
    public FileUpload fileUpload = new FileUpload();

    public FileUpload getFileUpload() {
        return fileUpload;
    }

    public void setFileUpload(FileUpload fileUpload) {
        this.fileUpload = fileUpload;
    }

    // Override ServletRequestAware
    private HttpServletRequest servletRequest;

    @Override
    public void setServletRequest(HttpServletRequest servletRequest) {
        this.servletRequest = servletRequest;
    }


    @Action(value="/home/upload")
    public String execute() throws Exception {
        if(fileUpload.hasFile()) {
            fileUpload.moveTo("home/common/images/user");
        }
        return "success";
    }

    public String getFlg() {
        if(fileUpload.fileFileName == "" || fileUpload.fileFileName == null ) {
            return "0";
        } else {
            return "1";
        }
    }
}

<小时/>

这是jsp文件。 (用户注册.jsp)

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insertTemplate template="HomeMaster.jsp">
    <!-- Inclue Header from HomeMaster -->
    <tiles:putAttribute name="head" value=""/>
    <!-- Include Main Content from HomeMaster -->
    <tiles:putAttribute name="main">
        <!-- Start Tree Link -->
        <ol id="tree">
            <li><a href="index.html"><img src="common/images/icon_tree.gif" width="14" height="11" />Trang ch?</a></li>
            <li>Ðang ký thành viên</li>
        </ol>
        <!-- End Tree Link -->
        <!-- Start Right Content -->
        <div id="right_contents">
            <!-- Start Content Box -->
            <div class="contents_box">
                <h4 class="tab_title5">Ðang ký thành viên</h4>
                <div class="innerbox1_left">
                    <table class="user_infoedit" cellspacing="0" cellpadding="0">
                        <tr>
                            <th scope="row" class="tab w200">User name</th>
                            <td class="t-left"><input type="text" name="input" class="form_txtarea w200" /></td>
                        </tr>

                        <tr>
                            <th scope="row" class="tab w200">User</th>
                            <td colspan="3" class="t-left"><input type="text" name="input" class="form_txtarea w200" /></td>
                        </tr>
                    </table>
                </div>
                    <div class="innerbox1_right">
                        <div class="userinfoedit_imagebox" id="user_img">
                            <s:if test="fileUpload.fileFileName !=''">
                                <img src="common/images/user/${fileUpload.fileFileName}" width="180" height="180" id="basic_img" />
                            </s:if>
                            <s:else>
                                <img src="common/images/user/blankavatar_l.gif" width="180" height="180" />
                            </s:else>
                        </div>
                        <div class="browse_userimage">
                            <form id ="#" name="myForm" action="upload" method ="post" enctype="multipart/form-data">
                                <input id="file_upload" name="fileUpload.file" type="file" class="inputarea" />
                            </form>
                        </div>
                    </div>
            </div>
            <!-- End Content Box -->
            <!-- Start Content Box -->
            <div class="contents_box">
                <div class="button_aria1">
                    <!-- <p class="btn_center_blu"><a href="#">&lt; Duy?t l?i</a></p> -->
                    <p class="btn_center_blu" id="btnDK"><a href="/upload">Ðang ký &gt;</a></p>
                </div>
            </div>
            <!-- End Content Box -->
        </div>
        <!-- End Right Content -->


        <!-- Start Left Content-->
        <div id="left_contents">
            <s:include value="../include/IncCategory.jsp" />
        </div>
        <!-- End Left Content-->
        <!-- Start Feed Back-->
        <s:include value="../include/IncFeedBack.jsp" />
        <!-- End Feed Back-->
    </tiles:putAttribute>
</tiles:insertTemplate>

<小时/>

这是加载图像的jquery。

$(function() { 
    $( "#file_upload" ).change(function() {
        document.myForm.submit();
    });
});

<小时/>

现在我可以将图像上传到服务器并将图像加载回“UserRegister.jsp”中。但是，如果我在表单中写入“用户名”后上传图像，则加载图像时“用户名”将丢失。

所以，我的问题是如何在图像上传到服务器后自动加载标签而不刷新页面。

非常感谢!

Answer 1

这与客户端的关系大于与服务器端的关系。 首先，为了在不重新加载页面的情况下发布/提交数据，您需要使用 Ajax 或 XMLHttpRequest。

使用 Ajax 的示例如下:Simple example

但就我个人而言，对于文件上传，我会使用 XMLHttpRequest (xhr)(请注意，这与 Ajax 非常相似，原因是 xhr 有更清晰的方式来监控上传进度，这通常是良好的上传界面所必需的)。

function upload(){
    // Get the files.
    var files = $('input#file_upload').files;

    var xhr = new XMLHttpRequest();
    xhr.open('post','/home/upload', true);

    // Done, get the link and add it to the div.
    xhr.onreadystatechange=function(status){
        if (xhr.readyState==4 && xhr.status==200){
            var link = xhr.responseText;
            $('div.image').innerHTML('<img src="'+link+'"></img>');
        }
    };

    // Sending request
    var form = new FormData();
    form.append('file',file);
    xhr.send(form);
}

所以，最终，使用ajax(或xhr)，您根本不需要html中的表单标签来提交文件。

[编辑]:我已经编辑了 url 路径和输入标记 ID 以匹配您的代码。请重试。