springMVC+ajax 文件上传带进度条

系统管理员 2022-07-24 07:04 318阅读 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 条评论，318人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关大文件上传进度条实现

大文件上传进度条实现 1.FormData对象提交表单进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数

喜欢ヅ旅行/ 2022年05月20日 06:23/ 0 赞/ 367 阅读

相关 ajax 文件上传进度条

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

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

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

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

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

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

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

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

相关 Ajax formData上传文件 + 进度条

// require('./lib/ajax'); require('jquery'); var type=0,//0 dp 1 mt

小咪咪/ 2021年06月24日 15:58/ 0 赞/ 614 阅读