繁体   English   中英

Spring文件上传进度条?

[英]File Upload Progress Bar with Spring?

我有以下 RestController 用于将文件上传到我的服务器端。

    @RequestMapping(value="/upload", method=RequestMethod.POST )
    @CrossOrigin
    public SimpleHttpResponse uploadFile(@RequestParam("uploadItem") MultipartFile fileUpload )
    {
        System.out.println(fileUpload.getOriginalFilename());
        try {
            byte[] fileBytes = fileUpload.getBytes();
            Files.write(Paths.get("C:\\Users\\" + fileUpload.getOriginalFilename()), fileBytes);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();

        }

        return new SimpleHttpResponse(true);
    }

无论如何要跟踪在任何给定时刻收到的字节并将其公开给 UI 吗? 我在 Google 上看到的许多示例都将 Servlet/JSP 与 Apache Commons 结合使用。 是否有基于 Spring 的解决方案来获取将 Apache Commons File Upload 与 Spring 集成的进度或方法? 理想情况下,应该有一种方法可以识别来自不同用户(甚至来自同一用户)的多个文件上传。 感谢您的指点。

使用 jquery 表单插件完成基于 spring 的解决方案

页面

<!DOCTYPE html>
<html>
    <head>
        <title>File Upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>

        <script type="text/javascript">
            $(function() {

                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');

                $('form').ajaxForm({
                    beforeSend: function() {
                        status.empty();
                        var percentVal = '0%';
                        bar.width(percentVal);
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal);
                        percent.html(percentVal);
                    },
                    complete: function(xhr) {
                        status.html(xhr.responseText);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="progress">
            <div class="bar"></div >
            <div class="percent">0%</div >
        </div>

        <div id="status"></div>
        <form action="/multipartfileupload/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file"><br>
            <input type="submit" value="Upload File to Server">
        </form>
    </body>
</html>

文件上传控制器

/**
 * @author asif.hossain
 * @since 3/8/17.
 */
@Controller
@RequestMapping("/upload")
public class FileUploadController {
    @RequestMapping(method = RequestMethod.GET)
    String show() {
        return "upload";
    }

    @RequestMapping(method = RequestMethod.POST)
    public String uploadFile(@RequestParam("file") MultipartFile file) {

        System.out.println(file.getName());
        return "home";
    }
}

Servlet配置

MVC-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
                           http://www.springframework.org/schema/context
                           http://www.springframework.org/schema/context/spring-context-4.3.xsd">

    <context:component-scan base-package="net.asifhossain.multipartfileupload"/>
    <bean id="viewresolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver"/>
</beans>

网页.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                             http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>

    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        <multipart-config>
            <max-file-size>20848820</max-file-size>
            <max-request-size>418018841</max-request-size>
            <file-size-threshold>1048576</file-size-threshold>
        </multipart-config>
    </servlet>

    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

您可以在我的 github 存储库中找到工作代码。 如果您有任何问题,请 Ping 我。

https://github.com/mirmdasif/springmvc/tree/master/springmvcmultipartfileupload

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM