专栏首页后台及大数据开发springMVC+ajax 文件上传 带进度条

springMVC+ajax 文件上传 带进度条

前端代码:

<form id= "uploadForm">  
      <p >指定文件名: <input type="text" name="filename" value= ""/></p >  
      <p >上传文件: <input type="file" name="file"/></ p>  
      <input type="button" value="上传" onclick="doUpload()" />  
</form>  

function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  
     $.ajax({  
          url: 'http://localhost:8080/xiaochangwei/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}  

后端:

@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";
    }

如果前端有很多实体类数据同文件一同提交

可以修改后端方法为:

upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

利用下面的代码更可实现带有进度条的文件上传

    <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 />

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于公共类中常见的静态方法需要调用spring注入的非静态变量的解决方案

    当你编写一个需要调用mybatis的dao层的类时,会先通过spring依赖注入该变量,但是由于你需要用到该变量在静态方法中,所以无法使用,此时你将该变量改为静...

    动力节点Java学院
  • 刨根究底字符编码之零——前言

    字符编码是计算机世界里最基础、最重要的一个主题之一。不过,在计算机教材中却往往浮光掠影般地草草带过,甚至连一本专门进行深入介绍的著作都找不到(对这一点我一直很困...

    用户1876609
  • Android开发笔记(十八)书籍翻页动画PageAnimation

    前面几节的动画都算简单,本文就介绍一个复杂点的动画——书籍翻页动画。Android有自带的翻页动画ViewPager,不过V...

    用户4464237
  • Android开发笔记(二十七)对象序列化

    程序中存储和传递信息,需要有个合适的数据结构,最简单的是定义几个变量,变量多了之后再分门别类,便成了聚合若干变量的对象。代码在函数调用时可以直接传递对象,但...

    用户4464237
  • 2018 团队设计天梯赛题解---华山论剑组

    2018 年度的团队设计天梯赛前几天结束了。但是成绩真的是惨不忍睹。。。毕竟是团队的比赛,如果团队平均水平不高的话,单凭一个人,分再高也很难拉起来(当然,一个人...

    指点
  • 牛顿法与拟牛顿法

    牛顿法和拟牛顿法是求解无约束最优化的常用方法,有收敛速度快的优点. 牛顿法属于迭代算法,每一步需要求解目标函数的海赛矩阵的逆矩阵,计算复杂. 拟牛顿法通过正定...

    JNJYan
  • 刨根究底字符编码之十三——UTF-16编码方式

    UTF-16编码方式源于UCS-2(Universal Character Set coded in 2 octets、2-byte Universal Cha...

    用户1876609
  • 数据降维(四)ISOMAP

    Isomap(Isometric Feature Mapping)是流行学习的一种,用于非线性数据降维,是一种无监督算法.

    JNJYan
  • 刨根究底字符编码之十四——UTF-16究竟是怎么编码的

    首先要注意的是,代理Surrogate是专属于UTF-16编码方式的一种机制,UTF-8和UTF-32是不用代理的。

    用户1876609
  • 刨根究底字符编码之十二——UTF-8究竟是怎么编码的

    UTF-8编码是Unicode字符集的一种编码方式(CEF),其特点是使用变长字节数(即变长码元序列、变宽码元序列)来编码。一般是1到4个字节,当然,也可以更长...

    用户1876609

扫码关注云+社区

领取腾讯云代金券