springMVC+ajax 文件上传带进度条

系统管理员 2022-07-24 07:04 426阅读 0赞

前端代码

<script type="text/javascript">
    
    
            function UpladFile() {
                var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
                var FileController = "http://localhost:8080/xiaochangwei/file/upload";                    // 接收上传文件的后台地址 
    
    
                // FormData 对象
                var form = new FormData($( "#uploadForm" )[0]);
    
    
                // XMLHttpRequest 对象
                var xhr = new XMLHttpRequest();
                xhr.open("post", FileController, true);
                xhr.onload = function () {
                   // alert("上传完成!");
                };
    
    
                xhr.upload.addEventListener("progress", progressFunction, false);
                xhr.send(form);
            }
    
    
            function progressFunction(evt) {
                var progressBar = document.getElementById("progressBar");
                var percentageDiv = document.getElementById("percentage");
                if (evt.lengthComputable) {
                    progressBar.max = evt.total;
                    progressBar.value = evt.loaded;
                    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
                    if(evt.loaded==evt.total){
                        alert("上传完成100%");
                    }
                }
            }  
    
    
        </script>
        
        <br />
        <br />
        <br />
        <br />
    
    
        <progress id="progressBar" value="0" max="100"></progress>
        <span id="percentage"></span>
    
    
        <br />
        <br />
        <br />
        <br />
    
    
    <form id= "uploadForm">
    
    
        <input type="file" id="file" name="myfile" />
        <input type="button" οnclick="UpladFile()" value="上传" />
    
    
    </form>

后端代码

@RequestMapping(value = "/upload", method = RequestMethod.POST)
        public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {
            System.out.println("开始");
            String path = request.getSession().getServletContext().getRealPath("upload");
            String fileName = file.getOriginalFilename();
            // String fileName = new Date().getTime()+".jpg";
            System.out.println(path);
            File targetFile = new File(path, fileName);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
    
    
            // 保存
            try {
                file.transferTo(targetFile);
            } catch (Exception e) {
                e.printStackTrace();
            }
            model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);
            return "result";
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP大文件切割上传并带上进度条功能

没有修改过php.ini文件的话，默认的上传大小限制为2M，那么该如何上传大文件了，比如说上传一个1G多的大文件，可以使用大文件切割上传的方式来解决。何为大文件切割上

梦里梦外;/ 2023年06月25日 08:28/ 0 赞/ 103 阅读

相关 java进度条_JAVA上传文件进度条的实现

很久不在这里发帖子了,最近在家闲来无事,想到转视频的那东西又要做了,遂翻出以前的帖子,看到一年前丰哥让我做一下文件上传的进度条....额~~那就做一下吧。东西很简单，主要用

Myth丶恋晨/ 2022年11月02日 00:55/ 0 赞/ 124 阅读

相关 asp.net实现文件上传带进度条（多种风格）

文件上传带进度条多种风格非常漂亮！ ![asp.net实现文件上传带进度条（多种风格）][asp.net] ![0_1274326725mk2m.gif][] !

柔光的暖阳◎/ 2022年08月26日 11:15/ 0 赞/ 371 阅读

相关 jquery ajax实现上传文件代码，带进度条

原文：[jquery ajax实现上传文件代码，带进度条][jquery ajax] 源代码下载地址：[http://www.zuidaima.com/share/155046

旧城等待，/ 2022年08月10日 15:56/ 0 赞/ 341 阅读

相关 springMVC+ajax 文件上传带进度条

前端代码 <script type="text/javascript"> function UpladFil

系统管理员/ 2022年07月24日 07:04/ 0 赞/ 427 阅读

相关 springMVC+ajax 文件上传带进度条

转自：https://www.cnblogs.com/xiaochangwei/p/5239104.html 前端代码： ![复制代码][copycode.gif]

今天药忘吃喽~/ 2022年05月30日 09:30/ 0 赞/ 391 阅读

相关 asp.net实现文件上传带进度条（多种风格）

文件上传带进度条多种风格非常漂亮！ ![asp.net实现文件上传带进度条（多种风格）][asp.net] ![0_1274326725mk2m.gif][] ![

谁践踏了优雅/ 2022年05月26日 05:36/ 0 赞/ 359 阅读

相关 ajax 文件上传进度条

一：方案分析基于浏览器的文件上传，为了有更好的用户体验，我们一般就设置一个旋转的图标，旋转的图标无法实时的监控文件上传情况。所以我们将实现一个如何实时的监控

旧城等待，/ 2022年04月16日 06:53/ 0 赞/ 524 阅读

相关上传文件进度条进度事件progress

在`XMLHttpRequest` 的`open`之前重写`XMLHttpRequestUpload`对象的进度事件`progress`方法，监听`progress`方法，计算

浅浅的花香味﹌/ 2021年12月04日 01:47/ 0 赞/ 707 阅读

相关 HTML5 jQuery+FormData 异步上传文件，带进度条

[http://blog.csdn.net/michaelwubo/article/details/50865246][http_blog.csdn.net_michaelwu

布满荆棘的人生/ 2021年09月14日 20:06/ 0 赞/ 529 阅读