Struts2+jquery.form.js实现图片与文件上传的方法

Struts2 + jquery.form.js 实现图片与文件上传的方法攻略

什么是 Struts2?

Struts2 是一款基于 Java EE 的 Web 应用开发框架，采用 MVC 架构模式，是广大企业级 Web 应用开发人员的首选框架之一。Struts2 最大的特点就是提供了多种视图技术，如 JSP、Freemarker、Velocity 等，以及控制器层的封装，使开发者能够快速地构建出安全、高效、易维护的 Web 应用。

什么是 jQuery.form.js?

jQuery.form.js 是一款基于 jQuery 的表单插件，主要用于提供简单易用的表单提交和 AJAX 文件上传的功能。该插件的使用非常简单，只需要引入相应的 JS 文件和 CSS 样式文件，然后在 HTML 表单中添加一些属性值即可。

实现方法

引入相关文件

在实现过程中，需要先引入相关文件，包括 jQuery 库和 jquery.form.js 文件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

编写 HTML 表单

在 HTML 中编写表单，需要增加 enctype="multipart/form-data" 属性，表示表单中包含文件：

<form action="upload.action" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" /><br/><br/>
    <input type="submit" value="上传" />
</form>

编写 Struts2 操作类

在 Struts2 项目中，需要编写一个 Action 类，来处理文件上传相关的业务逻辑。该 Action 类需要继承 org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper，并实现 com.opensymphony.xwork2.Action 接口。

public class UploadAction extends ActionSupport implements ServletRequestAware {

    private static final long serialVersionUID = 1L;

    private File uploadFile;
    private String uploadFileContentType;
    private String uploadFileFileName;
    private HttpServletRequest request;

    public String execute() throws Exception {
        String folder = request.getSession().getServletContext().getRealPath("/") + "upload/";
        File file = new File(folder);
        if (!file.exists())
            file.mkdir();
        File saveFile = new File(file, uploadFileFileName);
        FileUtils.copyFile(uploadFile, saveFile);
        return SUCCESS;
    }

    public void setUploadFile(File uploadFile) {
        this.uploadFile = uploadFile;
    }

    public void setUploadFileContentType(String uploadFileContentType) {
        this.uploadFileContentType = uploadFileContentType;
    }

    public void setUploadFileFileName(String uploadFileFileName) {
        this.uploadFileFileName = uploadFileFileName;
    }

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

在该类中，uploadFile 表示要上传的文件，uploadFileContentType 表示上传文件的 MIME 类型，uploadFileFileName 表示上传文件的文件名。在 execute() 方法中，首先获取上传文件夹，然后将上传的文件保存到该文件夹下。

编写 jQuery 代码

在 HTML 中增加一段 jQuery 代码，开启文件上传功能：

<script type="text/javascript">
    $(document).ready(function() {
        $('form').ajaxForm({
            beforeSubmit: function() {},
            success: function() {},
            datatype: 'json',
            clearForm: true,
            resetForm: true
        });
    });
</script>

其中，ajaxForm() 方法用于指定表单提交的方式，beforeSubmit 用于在提交前进行校验，success 用于提交成功后的处理逻辑，datatype 表示返回数据的格式，clearForm 和 resetForm 用于清空表单。

示例

示例1：仅上传图片

<form action="upload.action" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" accept="image/*" /><br/><br/>
    <input type="submit" value="上传" />
</form>

其中，accept 属性限制了上传文件的类型，只允许上传图片文件。

示例2：上传图片和文件

<form action="upload.action" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.gif,.pdf,.doc,.docx,.xls,.xlsx" /><br/><br/>
    <input type="submit" value="上传" />
</form>

其中，accept 属性限制了上传文件的类型，只允许上传图片文件和文档文件。