JS+Struts2多文件上传实例详解

简介

在现代web应用中，文件上传功能变得越来越常见。本文将介绍如何使用JavaScript和Struts2框架实现多文件上传功能。

实现步骤

1. 在HTML中创建上传表单

首先，在HTML页面中创建文件上传表单。使用<input>元素来创建上传表单并指定type="file"。此外，我们还需在form元素中包含一个上传按钮，用来提交表单：

<form enctype="multipart/form-data">
    <input type="file" name="files" multiple>
    <button type="button" onclick="upload()">上传</button>
</form>

2. 编写JavaScript上传函数

创建上传表单后，我们需要编写JavaScript函数来上传文件。我们可以使用XMLHttpRequest对象向服务器提交表单数据。

function upload() {
    // 得到文件域
    var fileInput = document.getElementsByName("files")[0];

    // 创建FormData对象来构建表单数据
    var formData = new FormData();
    for (var i = 0; i < fileInput.files.length; i++) {
        formData.append("files", fileInput.files[i]);
    }

    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 注册回调函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            } else {
                console.log("上传失败：" + xhr.statusText);
            }
        }
    }

    // 发送POST请求
    xhr.open("POST", "/upload");
    xhr.send(formData);
}

说明：

通过document.getElementsByName("files")[0]获得文件域<input>元素。
创建FormData对象来构造表单数据，并使用append()方法将每个文件添加到FormData中。
创建XMLHttpRequest对象，并通过xhr.onreadystatechange注册回调函数。
使用xhr.open()方法打开指定的URL，向服务器提交FormData对象。

3. 在Struts2中接收上传文件

接下来，我们需要编写Struts2 Action类来接收上传文件。

public class UploadAction extends ActionSupport {
    private List<File> files;
    private List<String> filesFileName;
    private List<String> filesContentType;

    public String execute() {
        try {
            for (int i = 0; i < files.size(); i++) {
                File file = files.get(i);
                String fileName = filesFileName.get(i);
                String contentType = filesContentType.get(i);
                System.out.println("上传文件：" + fileName + "，类型：" + contentType + "，大小：" + file.length());
            }
        } catch (Exception e) {
            e.printStackTrace();
            return ERROR;
        }

        return SUCCESS;
    }

    public List<File> getFiles() {
        return files;
    }

    public void setFiles(List<File> files) {
        this.files = files;
    }

    public List<String> getFilesFileName() {
        return filesFileName;
    }

    public void setFilesFileName(List<String> filesFileName) {
        this.filesFileName = filesFileName;
    }

    public List<String> getFilesContentType() {
        return filesContentType;
    }

    public void setFilesContentType(List<String> filesContentType) {
        this.filesContentType = filesContentType;
    }
}

说明：

定义上传文件列表、文件名列表和文件类型列表三个属性。
实现Action的execute()方法。
在execute()方法中遍历上传文件列表，并输出文件名、文件类型和文件大小。
为每个属性都提供了getter和setter方法。

4. 在Struts2中配置上传拦截器

最后，我们需要在Struts2中配置文件上传拦截器。

<interceptors>
    <interceptor name="fileUpload"
                 class="org.apache.struts2.interceptor.FileUploadInterceptor" />
    <interceptor-stack name="myStack">
        <interceptor-ref name="fileUpload" />
        <interceptor-ref name="defaultStack" />
    </interceptor-stack>
</interceptors>

<global-results>
    <result name="input">/upload.jsp</result>
    <result name="error">/upload.jsp</result>
</global-results>

<action name="upload"
        class="com.example.actions.UploadAction"
        method="execute">
    <interceptor-ref name="myStack" />
    <result name="success">/success.jsp</result>
    <result name="input">/upload.jsp</result>
    <result name="error">/upload.jsp</result>
</action>

说明：

在配置文件中声明一个名为myStack的自定义拦截器栈，并将文件上传拦截器和默认拦截器栈都引入该拦截器栈中。
在全局结果中定义了input和error两个结果，当Action返回这些结果时都会跳转到upload.jsp页面。
配置了upload Action，在其中引入myStack拦截器栈，并指定了success、input和error三种返回结果对应的JSP页面。

示例

以下是两条使用JS+Struts2实现多文件上传的示例：

示例一

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
</head>
<body>
    <h1>文件上传示例</h1>
    <form enctype="multipart/form-data">
        <input type="file" name="files" multiple>
        <button type="button" onclick="upload()">上传</button>
    </form>

    <script src="upload.js"></script>
</body>
</html>

JavaScript代码：

function upload() {
    var fileInput = document.getElementsByName("files")[0];
    var formData = new FormData();
    for (var i = 0; i < fileInput.files.length; i++) {
        formData.append("files", fileInput.files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            } else {
                console.log("上传失败：" + xhr.statusText);
            }
        }
    }

    xhr.open("POST", "/upload");
    xhr.send(formData);
};

Java代码：

public class UploadAction extends ActionSupport {
    private List<File> files;
    private List<String> filesFileName;
    private List<String> filesContentType;

    public String execute() {
        try {
            for (int i = 0; i < files.size(); i++) {
                File file = files.get(i);
                String fileName = filesFileName.get(i);
                String contentType = filesContentType.get(i);
                System.out.println("上传文件：" + fileName + "，类型：" + contentType + "，大小：" + file.length());
            }
        } catch (Exception e) {
            e.printStackTrace();
            return ERROR;
        }

        return SUCCESS;
    }

    public List<File> getFiles() {
        return files;
    }

    public void setFiles(List<File> files) {
        this.files = files;
    }

    public List<String> getFilesFileName() {
        return filesFileName;
    }

    public void setFilesFileName(List<String> filesFileName) {
        this.filesFileName = filesFileName;
    }

    public List<String> getFilesContentType() {
        return filesContentType;
    }

    public void setFilesContentType(List<String> filesContentType) {
        this.filesContentType = filesContentType;
    }
}

示例二

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
</head>
<body>
    <h1>文件上传示例</h1>
    <form enctype="multipart/form-data">
        <input type="file" name="files" multiple>
        <button type="submit">上传</button>
    </form>

    <script src="upload.js"></script>
</body>
</html>

JavaScript代码：

var form = document.forms[0];

form.addEventListener("submit", function(event) {
    event.preventDefault();
    upload();
});

function upload() {
    var fileInput = document.getElementsByName("files")[0];
    var formData = new FormData();
    for (var i = 0; i < fileInput.files.length; i++) {
        formData.append("files", fileInput.files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            } else {
                console.log("上传失败：" + xhr.statusText);
            }
        }
    }

    xhr.open("POST", "/upload");
    xhr.send(formData);
};

Java代码：

public class UploadAction extends ActionSupport {
    private List<File> files;
    private List<String> filesFileName;
    private List<String> filesContentType;

    public String execute() {
        try {
            for (int i = 0; i < files.size(); i++) {
                File file = files.get(i);
                String fileName = filesFileName.get(i);
                String contentType = filesContentType.get(i);
                System.out.println("上传文件：" + fileName + "，类型：" + contentType + "，大小：" + file.length());
            }
        } catch (Exception e) {
            e.printStackTrace();
            return ERROR;
        }

        return SUCCESS;
    }

    public List<File> getFiles() {
        return files;
    }

    public void setFiles(List<File> files) {
        this.files = files;
    }

    public List<String> getFilesFileName() {
        return filesFileName;
    }

    public void setFilesFileName(List<String> filesFileName) {
        this.filesFileName = filesFileName;
    }

    public List<String> getFilesContentType() {
        return filesContentType;
    }

    public void setFilesContentType(List<String> filesContentType) {
        this.filesContentType = filesContentType;
    }
}

总结

本文讲解了如何使用JavaScript和Struts2框架实现多文件上传功能。使用该方法，我们可以轻松上传多个文件到服务器端，并在Struts2 Action中方便地接收上传文件。如果你需要实现多文件上传功能，不妨一试！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+Struts2多文件上传实例详解 - Python技术站

JS+Struts2多文件上传实例详解

JS+Struts2多文件上传实例详解

简介

实现步骤

1. 在HTML中创建上传表单

2. 编写JavaScript上传函数

3. 在Struts2中接收上传文件

4. 在Struts2中配置上传拦截器

示例

示例一

示例二

总结

相关文章