springMVC+ajax实现文件上传且带进度条实例_网络技术

springMVC+ajax实现文件上传且带进度条实例

发布时间 - 2026-01-10 22:36:34 点击率：次

前端代码：

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

  <progress id="progressBar" value="0" max="100"></progress>


<form id= "uploadForm">

  <input type="file" id="file" name="myfile" />
  <input type="button" onclick="UpladFile()" value="上传" />

</form>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# springmvc # 上传进度条 # ajax # 上传 # spring # mvc进度条 # 利用SpringMVC和Ajax实现文件上传功能 # SpringMVC+Ajax实现文件批量上传和下载功能实例代码 # springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项 # SpringMVC结合ajaxfileupload实现文件无刷新上传代码 # SpringMVC结合ajaxfileupload.js实现文件无刷新上传 # springMVC结合AjaxForm上传文件 # Springmvc加ajax实现上传文件并页面局部刷新 # 上传文件 # 后端 # 有很多 # 大家多多 # 文件上传 # 进度条 # 实体类 # false # async # cache # success # processData # contentType # upload # System # error # model # data # POST

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：个人所得税APP家庭成员信息怎么填_个人所得税APP家庭成员

下一篇：免费网站制作视频软件,那些提供免费电影的网站，他们是怎么盈

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：个人所得税APP家庭成员信息怎么填_个人所得税APP家庭成员

下一篇：免费网站制作视频软件,那些提供免费电影的网站，他们是怎么盈