当前位置：首页 > 行业动态 > 正文

ajaxstruts2上传图片

admin
行业动态
2025-03-18
8

1. 在JSP页面创建文件上传表单，设置 enctype="multipart/form-data"。，2. 配置Struts2拦截器以支持文件上传。，3. 在Action类中使用 File类型属性接收上传的文件。，4. 使用Ajax提交表单数据到Action，并在回调函数中处理响应。

Ajax Struts2 上传图片

一、

Ajax Struts2 上传图片是一种在Web应用程序中实现异步文件上传的技术，通过结合Ajax的异步请求能力和Struts2的强大功能，可以实现流畅的图片上传体验，而无需刷新整个页面。

二、技术栈与依赖

1、前端：HTML, JavaScript, JQuery（或其它Ajax库）

2、后端：Java, Struts2框架

3、依赖库：Apache Commons FileUpload, Apache Commons IO（用于处理文件上传）

三、前端实现

1、HTML表单：创建一个包含文件输入和提交按钮的表单。

2、JavaScript/JQuery：使用Ajax监听表单提交事件，拦截默认行为，并通过Ajax请求将文件发送到服务器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Struts2 Upload Image</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="uploadForm" action="uploadImage" method="post" enctype="multipart/form-data">
        <input type="file" name="imageFile" id="imageFile" />
        <button type="submit">Upload</button>
    </form>
    <script>
        $(document).ready(function() {
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: 'uploadImage',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        alert('Upload successful!');
                    },
                    error: function(xhr, status, error) {
                        alert('Upload failed: ' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

四、后端实现（Struts2 Action）

1、配置Action：在struts.xml中配置Action来处理文件上传请求。

<action name="uploadImage" class="com.example.UploadAction" method="execute">
    <result name="success">/success.jsp</result>
    <result name="error">/error.jsp</result>
</action>

2、Action类：创建Action类来处理文件上传逻辑。

package com.example;
import com.opensymphony.xwork2.ActionSupport;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.interceptor.ServletRequestAware;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Map;
public class UploadAction extends ActionSupport implements ServletRequestAware {
    private HttpServletRequest request;
    private File imageFile;
    private String imageFileContentType;
    private String imageFileFileName;
    @Override
    public void setServletRequest(HttpServletRequest request) {
        this.request = request;
    }
    @Action(results = {
        @Result(name = "success", location = "/success.jsp"),
        @Result(name = "error", location = "/error.jsp")
    })
    public String execute() throws IOException {
        if (imageFile != null) {
            String uploadDir = request.getRealPath("/uploads");
            File destFile = new File(uploadDir, imageFileFileName);
            FileUtils.copyFile(imageFile, destFile);
            return SUCCESS;
        } else {
            return ERROR;
        }
    }
    // Getters and Setters for imageFile, imageFileContentType, and imageFileFileName
}