1. Python技术站首页
  2. 其他
  3. Java

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

• Java
yizhihongxing

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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月20日
下一篇 2023年5月20日

相关文章

  • IDEA中用maven连接数据库的教程

    当使用IntelliJ IDEA作为Java开发工具时，可以使用Maven连接数据库。该过程涉及到以下步骤： 配置数据库驱动程序 在项目的pom.xml文件中添加数据库驱动程序的依赖。例如，如果你要使用MySQL数据库，你可以添加以下依赖： <dependency> <groupId>mysql</groupId> &lt…

    Java 2023年5月20日
    00

  • Java foreach循环的使用方法详解

    Java foreach循环的使用方法详解 简介 Java中foreach循环是一种比较方便的遍历数组或集合的方法。它可以迭代任何实现了Java Iterable接口的对象。在进行数据遍历或数据处理时使用foreach循环会非常方便，避免了手动对数组或集合进行索引和循环控制的繁琐操作。 使用方法 遍历数组 使用Java foreach循环遍历数组非常简单，可…

    Java 2023年5月26日
    00

  • Java 客户端操作 FastDFS 实现文件上传下载替换删除功能

    Java 客户端操作 FastDFS 实现文件上传下载替换删除功能攻略 什么是 FastDFS？ FastDFS 是一个高性能的分布式文件系统，常用于分布式文件存储和视频处理等场景中。FastDFS 将文件日志放在单独的日志服务器上，解决服务器扩展问题。FastDFS 提供了文件上传、删除、替换和路径查询等基本的文件操作接口，同时它还具备了存储单元尺寸的动态…

    Java 2023年5月19日
    00

  • java比较两个list是否相同equals的代码详解

    要比较两个List是否相同，可以使用Java内置的equals()方法，但是需要注意以下几点： equals()方法比较的是两个List的元素个数和元素值，因此需要保证元素位置、个数和值完全一致。 如果List中包含自定义对象，那么自定义对象需要自己实现equals()方法，才能保证正确比较。 比较两个List时，可以使用Collections工具类中的eq…

    Java 2023年5月26日
    00

  • SpringBoot+SpringSecurity+jwt实现验证

    下面我会提供一个基于Spring Boot、Spring Security 和 JSON Web Token（JWT）的认证示例。 一、什么是JWT JSON Web Token（JWT）是一个开放标准（RFC 7519），它定义了一种简单的、自包含的方式，用于在通过网络进行传输的两个实体之间安全传递信息。它被称为自包含是因为JWT包含了所有身份验证（Aut…

    Java 2023年5月20日
    00

  • Java代码注释规范详解

    以下是“Java代码注释规范详解”的完整攻略。 为什么要使用注释 代码注释是为了在自己和他人阅读代码时更好地理解代码的功能和实现方式，也可以帮助开发人员在维护和修改代码时更加轻松。 注释的分类 在Java程序中，注释可以分为单行注释和多行注释两种。 单行注释 单行注释以“//”开头，作用范围为当前行。 示例代码： //这是一个单行注释 int num = 1…

    Java 2023年5月23日
    00

  • Java动态数组添加数据的方法与应用示例

    Java动态数组添加数据的方法与应用示例 在Java中，动态数组是一种常见的数据结构，也可以称之为可变长数组，它的长度可以随着元素的增加而动态地扩展。在实际开发中，我们经常需要对动态数组进行添加数据的操作。本篇文章将详细讲解Java动态数组添加数据的方法与应用示例。 Java动态数组的定义 Java动态数组的定义是比较简单的，我们只需要使用Java中内置的A…

    Java 2023年5月26日
    00

  • Java后台返回和处理JSon数据的方法步骤

    Java后台返回和处理JSON数据的方法步骤可以分为以下几个步骤： 步骤一：导入JSON库 首先需要在Java项目中导入Json库，比较流行的有Gson和Jackson。这里以Gson为例： <!–导入Gson依赖–> <dependency> <groupId>com.google.code.gson</gro…

    Java 2023年5月26日
    00
合作推广
合作推广
分享本页
返回顶部