断点续传前后端源码

最新推荐文章于 2024-03-02 16:29:48 发布
最新推荐文章于 2024-03-02 16:29:48 发布
阅读量401 收藏
点赞数 1
分类专栏： 断点续传 文章标签： spring js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xg_54/article/details/122434915
版权

 js不分

/***
 * 断点续传
 * @param obj
 */
//创建文件、进度、按钮等
function  progressUpload(obj){
     var files = obj.files;
     var p = new Promise(function(resolved){ 
         $(obj).parents(".fileDiv").eq(0).parent().find(".partitionUpload").remove();
        if (files.length) {
            let str = '<div class="col-xs-12 partitionUpload"  >';
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                str += '<div class="col-xs-10 '+file.lastModified+'" style="position:relative; left: 16.3%; padding-bottom: 10px;" >';
                str += "<span>"+file.name+"</span>"
                str += "<span>"
                      +"<i ><b style='padding: 12px; color: #00cc33;'>0%</b></i>"
                      +"</span>"
                      
                str +=  "<span>"
                       +"<a style='color: #d9534f;background-color: transparent;border: #d9534f 1px solid; border-radius: 3px; padding: 2px 7px; font-size: 12px;' href='javascript:void(0);' class='upload1' οnclick=\"pauseUpload1('"+file.lastModified+"','"+file.name+"',this)\">暂停</a>&nbsp;"
                       +"<a style='color: #d9534f;background-color: transparent;border: #d9534f 1px solid; border-radius: 3px; padding: 2px 7px; font-size: 12px; display:none' href='javascript:void(0);' class='upload2' οnclick=\"pauseUpload2('"+file.lastModified+"','"+file.name+"',this)\">继续</a>&nbsp;"
                       +"<a style='color: #d9534f;background-color: transparent;border: #d9534f 1px solid; border-radius: 3px; padding: 2px 7px; font-size: 12px;' href='javascript:void(0);' οnclick=\"deleteItem('"+file.lastModified+"','"+file.name+"',this)\">删除</a>"
                       +"</span>"
                       +'</div>';
            }
            str += '<div>';
            //加载上传样式
            $(obj).parents(".fileDiv").after(str);
            resolved("wo成功了");
           
        }
   }) ;
     p.then(function(result){
      window.setTimeout(function(){
          //开始上传
          pload(files,obj)
      },100)
    });
}     

//循环文件，上传
function pload(files,obj){
    for (var i = 0; i < files.length; i++) {
        //上传
        var file = files[i];
        uploadItem(file,obj);
    }
}
//切片大小  1M
 var paragraph  = 1024 *1024; 


 // 从start字节处开始上传
 function uploadItem(file,obj) {
     if(file){
         var endSize = getLastestUploadEndSize(file);
         var part = getLastestUploadPart(file);
         var uploadState = getLastestUploaduploadState(file);
         var  fd = new FormData();
        
         if(uploadState == 1 && endSize <= file.size){
             startSize = endSize;
            if(paragraph > (file.size - endSize)){
                endSize = file.size;
            }else{
                endSize += paragraph ;
            }
              //新建一个FormData对象
             
            fd.append("fileName",file.name);
            fd.append("lastModified",file.lastModified);
            fd.append("functionFileName","partitionUpload");
            fd.append("part",part);
            fd.append("file",file.slice(startSize, endSize));
            
            if(endSize == file.size){
                fd.append("end",1);
            }else{
                fd.append("end",0);
            }
            //上传
            uploadBuffer(fd,obj);
            //更新进度
            uploadProgress(endSize,file);
            var progress = localStorage.getItem(file.lastModified + "_" + file.name+"progress")
            $(obj).parents(".fileDiv").next().find("."+file.lastModified).find("b").text(progress+"%");
            //如果是最后一部分，则结束迭代
            if(endSize == file.size ){
                //上传完毕，暂停按钮关闭
                $(obj).parents(".fileDiv").next().find("."+file.lastModified).find(".upload1").hide();
            }else{
                window.setTimeout(function(){
                //迭代执行本方法
                uploadItem(file,obj);
                
                },300)
            }
           
         }
     }
 }
 
 //【暂停/继续】 状态
 function getLastestUploaduploadState(uploadFile){
     var uploadState = localStorage.getItem(uploadFile.lastModified + "_" + uploadFile.name+"uploadState");
     if(uploadState == null){
         uploadState = 1;
     }
     return  uploadState ; 
 }
 //上传的第几部分
   function getLastestUploadPart(uploadFile){
      var time = localStorage.getItem(uploadFile.lastModified + "_" + uploadFile.name+"time");
      if(time == null){
          time = 1;
      }
      return  time ; 
  }
  //暂停
  function pauseUpload1(lastModified,name,obj){
      localStorage.setItem(lastModified + "_" + name+"uploadState",2);
      $(obj).hide();
      $(obj).next().show();
  }
  //继续
  function pauseUpload2(lastModified,name,obj){
      localStorage.setItem(lastModified + "_" + name+"uploadState",1);
      $(obj).hide();
      $(obj).prev().show();
      var inputObject = $(obj).parents(".partitionUpload").eq(0).prev().find("[type=file]");
      var files = inputObject[0].files;
      var targetfile ;
      for(var i =0;i<files.length;i++){
          var file =files[i]; 
          if(file.lastModified == lastModified){
              targetfile = file;
          }
      }
      uploadItem(targetfile,$(inputObject));
  }
  //删除
  function deleteItem(lastModified,name,obj){
     localStorage.removeItem(lastModified + "_" + name);
      localStorage.removeItem(lastModified + "_" + name+"uploadState");
      localStorage.removeItem(lastModified + "_" + name+"time");
      $(obj).parents(".col-xs-12").eq(0).remove();
  }
 /**
  * 从localStorage检查最后一次上传的字节
  */
 function getLastestUploadEndSize(uploadFile){
     var lastestLen = localStorage.getItem(uploadFile.lastModified + "_" + uploadFile.name);
         if(lastestLen){
             return parseInt(lastestLen);
         }else{
             localStorage.removeItem(uploadFile.lastModified + "_" + uploadFile.name);
             return 0;
         }
     }
   //显示处理进程
 function uploadProgress(uploadLen,uploadFile) {
     var percentComplete = Math.round(uploadLen * 100 / (uploadFile.size));
    // document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
     localStorage.setItem(uploadFile.lastModified + "_" + uploadFile.name+"progress",percentComplete);
     var time = localStorage.getItem(uploadFile.lastModified + "_" + uploadFile.name+"time");
     if(time == null){
         time = 1;
     }
     //保存到LocalStorage一边下次传输，可以记忆起这个断点
     localStorage.setItem(uploadFile.lastModified + "_" + uploadFile.name, uploadLen);
     localStorage.setItem(uploadFile.lastModified + "_" + uploadFile.name+"time", parseInt(time)+1);
      
 }
 // 往后台传参
 function uploadBuffer(formData,obj){
    $.ajax({
        url:'../intelligenceDataThird/partitionUpload.do',
        type:'post',
        async:false,
        data:formData,
        processData:false,  //tell jQuery not to process the data
        contentType: false,
        success:function(d){
           if(formData.get("end") == 1){
               var name =  $(obj).attr("name");
               var  lastModified= formData.get("lastModified")
               $(obj).parents(".fileDiv").next().find("."+lastModified).find(".upload1").before("<input type='hidden' name='"+name+"' value='"+d.url+"'>");
               localStorage.setItem(lastModified + "_end" ,"end");
                  var files = obj.files;
                  var isOver=true;
                  for(var i =0;i<files.length;i++){
                      var file =files[i]; 
                      var endflag = localStorage.getItem(file.lastModified + "_end")
                      if(endflag != "end"){
                          isOver=false;
                          break
                      }
                  }
                  if(isOver){
                      //结束后清除localStorage
                        localStorage.removeItem(file.lastModified + "_" + file.name);
                        localStorage.removeItem(file.lastModified + "_" + file.name+"uploadState");
                        localStorage.removeItem(file.lastModified + "_" + file.name+"time");
                        localStorage.removeItem(file.lastModified + "_end");
                      $(obj).val("");
                  }
           }
        }
    })
 }

后台代码

 /**断点续传
     * @param file
     * @param fileName
     * @param part
     * @return
     */
    @ResponseBody
    @RequestMapping("/partitionUpload.do")
    public Map<String,Object> partitionUpload(HttpServletResponse response ,@RequestParam("file") MultipartFile file,String fileName,String functionFileName,Integer part,Integer end) {
        // 定义上传路径
        MyUtils myUtils = new MyUtils();
           String fileUplodPath = myUtils.getWechatProperty("fileUploadPath", "config");
           String uploadDirectory=myUtils.getWechatProperty("fileAccessApacheUrl", "config");
           if(StringUtils.isNotBlank(functionFileName)){
               functionFileName ="partitionUpload";
           }
           Map<String,Object> map = new HashMap<>();
           try {
               if (file != null ) {
                   String time =String.valueOf(new Date().getTime());
                   SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd");
                   String date = formatter.format(new Date());
                   String suffix =  fileName.substring(fileName.lastIndexOf("."));;
                if(part.equals(1) && end.equals(1)){
                    //文件小，没有分割
                    String tempFile = fileUplodPath + functionFileName + File.separator + time+suffix;  
                    File localFile = new File(tempFile);  
                    localFile.mkdirs();
                    file.transferTo(localFile);
                    map.put("url", uploadDirectory+ functionFileName +File.separator +time+suffix+"|"+fileName);
                }else{
                    if(end.equals(1)){
                        map.put("url", uploadDirectory+ functionFileName +File.separator + date + File.separator + fileName +"|"+fileName);
                     }
                    String tempFile = fileUplodPath + functionFileName + File.separator + date + File.separator + fileName;
                    File localFile = new File(tempFile);
                    if(!localFile.exists()){
                        //第一次传输，创建文件
                        localFile.mkdirs();
                        file.transferTo(localFile);
                    }else{
                        //续写文件
                        InputStream inputStream =file.getInputStream();
                        //true，则表示追加
                        @SuppressWarnings("resource")
                        FileOutputStream output = new FileOutputStream(localFile,true);
                        int b = 0;   
                        byte[] bytes = new byte[inputStream.available()];  
                        while (b != -1){  
                            b = inputStream.read(bytes);  
                            //4.写到输出流(out)中  
                            output.write(bytes,0,b);  
                        }
                    }
                }
                 } 
             }catch (Exception e) {
             e.printStackTrace();
             return map;
          }
        return map;
    }

效果

xg_54
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery资料之位置操作
宅羽的博客
12-17 132
◆ offset()： 设置或获取被选元素相对于文档的偏移坐标，跟父级没有关系。 该方法有两个属性：left和top。 offset().top //用于获取距离文档顶部的距离 offset().left //用于获取距离文档左侧的距离 设置元素的偏移： offset( { top: 10, left: 30 } ); ◆ position()： 返回被选元素相对于带有定位的父级的偏移坐标...
vue3如何实现断点续传(附源码)
编程似海、
11-21 1572
vue3断点续传示例，附源码文件
java http大文件断点续传上传
Mr_Zang666的博客
08-12 3201
核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 *如何分片； *如何合成一个文件； *中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百...
前后端配合实现大文件断点续传（前端逻辑）
m0_61607317的博客
02-11 915
当上传文件时，大文件上传时耗时过长，如果遇到网络卡顿、断网等情况，再重新开始上传的体验感非常不好。前端优化分片上传文件，上传时把大文件分成很多个小文件，等到网络状况恢复了之后，即从之前上传断点处继续上传，提高用户体验。点击上传时获取上传文件，解析切片数据，设置切片大小，处理成多个切片数据，判断每个切片数据是否上传成功，未上传成功的部分继续上传，如果所有切片上传成功，合并全部已上传文件给后端接收。
断点续传实现
殇的不悔
03-24 893
断点续传实现java
断点续传后端代码.zip
05-12
而这里的"断点续传后端代码.zip"则包含了支持这些功能的服务器端代码，确保了整个上传过程的稳定性和效率。 1. **断点续传原理**： 断点续传的核心在于将大文件分割成若干小块，每个块都有唯一的标识。当上传开始...
MinIo最佳性能分片上传、断点续传方案
03-14
本文将详细解析这两种技术以及如何在MinIO中实现它们，并提供前后端的示例代码。 分片上传： 1. **分片原理**：当上传大文件时，将其分割成多个小块（称为分片），然后逐个上传。这种方式可以提高上传速度，因为多...
java文件上传，断点续传+aop操作日志
04-11
综上所述，这个主题涵盖了从用户交互的文件上传和下载功能，到服务器端的断点续传实现，再到使用AOP进行操作日志记录的整个流程。理解并掌握这些知识点对于开发高效、健壮的Web应用程序至关重要。
springboot+vue前后端分离开发项目源码
11-01
在本项目中，"springboot+vue前后端分离开发项目源码"是一个综合性的Web应用开发实例，它结合了Spring Boot后端框架和Vue.js前端框架，实现了前后端分离的架构设计。这样的设计模式在现代Web开发中非常常见，因为它...
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-21
在本项目中，"springboot+vue实现超大文件分片极速上传与下载完整前后端源码"，我们看到了一个采用现代Web技术构建的高效文件管理系统。这个系统利用了SpringBoot后端框架和Vue.js前端框架的优势，为处理大文件上传...
断点续传前后端实现代码逻辑及代码
最新发布
xyfwang的博客
03-02 531
实现前端断点续传的功能，主要解决由于网络问题或用户操作导致上传中断后，可以从中断的地方继续上传文件，而不是重新上传整个文件。这样可以大大提高大文件上传的效率和用户体验。
前端 + 后端 实现分片上传（断点续传/极速秒传）
pscool的博客
04-07 3557
前端 + 后端 实现分片上传（断点续传/极速秒传）
前端实现文件的断点续传
weixin_45525177的博客
11-07 761
而我们需要对FileList对象进行修改再提交，在之前的文章中知晓了这种提交的一些注意点，因为FileList对象不能直接更改，所以不能直接通过表单的.submit()方法上传提交，需要结合FormData对象生成一个新的数据，通过Ajax进行上传操作。这个例子实现了文件断点续传的基本功能，不过手动的“暂停上传”操作还未实现成功，可以在上传过程中刷新页面来模拟上传的中断，体验“断点续传”、不过，在显示文件信息的时候，可能这个文件之前之前已经上传过了，为了断点续传，需要判断并在界面上做出提示。
大文件上传如何做断点续传?全端+后端结合开发
wangxuanyang_zer的博客
08-12 1357
断点续传（Resumable File Upload）是一种文件上传的技术，它允许在上传过程中出现中断或失败的情况下，能够从中断的位置继续上传，而不需要重新上传整个文件。这在处理大文件或不稳定的网络连接时非常有用。
前段实现文件的断点续传
dyx001007的博客
10-28 1254
前段实现文件的断点续传
【开发经验】java 20行代码实现断点续传
dxyzhbb的博客
05-26 311
引言 随着文件的越来越大，很多场景需要断点续传功能，这个功能很友好，大文件上传了一半，下次还能接着上传，免得断点或者关机之后还需要从头开始。 断点上传思路很简单，只需要在上传时将大文件切割为多个分片，将这些小的分片进行上传。 实现思路 上传文件时判断是否有上传过。 如果没有上传过，则直接对文件进行切割，切割成很多分片进行上传。 如果有上传过，则判断之前上传了那些分片，只对于剩下的分片进行上传即可； 1.如何判断文件是否有上传过？ ​ 通过散列函数进行文件的标识，来判断文件是否有上传过。散列函数（Hash）
阿里云OSS文件上传（分片上传、断点续传）前后端实现
热门推荐
零度的博客专栏
03-16 1万+
阿里云oss 文件上传 分片上传 断点续传
java实现前后端进度条,前后端断点续传思路及简单实现
weixin_33599503的博客
03-13 1818
前端主要是利用 FileAPI 来进行按块大小分割, 然后一个一个上传.主要就是利用 File 对象的 slice 方法进行按字节范围分割(一块), 然后一块一块地上传还要完善的地方在前端, 可以将每块上传的进度保存在本地, 下次选择同样的文件时, 只上传上次还没有上传完的块即可添加进度条for 循环里的分块上传, 性能还有待完善. 弄成同步的, 即只等上一片上传完, 才执行下一片生成文件 md5...
前后端实现文件上传下载断点续传功能
zyh_haha的博客
08-23 1751
本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~ HTTP文件断点续传的原理 Node核心模块Http应用-断点续传 前端实现文件的断点续传 断点续传了解一下啊？ ...
java断点续传前后端交互实现代码
05-26
Java断点续传需要前后端交互实现，以下是一个简单的示例代码： 前端代码（使用jQuery）： ```javascript $(function() { var fileInput = $('#fileInput'); var fileSize = fileInput[0].files[0].size; var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值