首页 > 编程语言 >JavaScript超大文件上传解决方案:分片断点上传

JavaScript超大文件上传解决方案:分片断点上传

时间:2022-11-08 14:11:26浏览次数:58  
标签:文件 form 上传 超大 JavaScript ajax jsp data

 javaweb上传文件

上传文件的jsp中的部分

上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求

    1. 通过form表单向后端发送请求

         <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">

            <div class="bbxx wrap">

                <input type="text" id="side-profile-name" name="username" class="form-control">

                <input type="file" id="example-file-input" name="avatar">

                <button type="submit" class="btn btn-effect-ripple btn-primary">Save</button>

            </div>

        </form>

改进后的代码不需要form标签,直接由控件来实现。开发人员只需要关注业务逻辑即可。JS中已经帮我们封闭好了

编辑

通过监控工具可以看到控件提交的数据,非常的清晰,调试也非常的简单。

编辑

 

2. 通过ajax向后端发送请求

        1.

            $.ajax({ 

                 url : "${pageContext.request.contextPath}/UploadServlet", 

                 type : "POST", 

                 data : $( '#postForm').serialize(), 

                 success : function(data) { 

                      $( '#serverResponse').html(data); 

                 }, 

                 error : function(data) { 

                      $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); 

                 } 

            }); 

ajax分为两部分,一部分是初始化,文件在上传前通过AJAX请求通知服务端进行初始化操作

编辑

 

在文件上传完后向服务器发送通知

编辑

 

这里需要处理一个MD5秒传的逻辑,当服务器存在相同文件时,不需要用户再上传,而是直接通知用户秒传

编辑

这里可以看到秒传的逻辑是非常 简单的,并不是特别的复杂。

            var form = new FormData();

            form.append("username","zxj");

            form.append("avatar",file);

            //var form = new FormData($("#postForm")[0]);

            $.ajax({

                url:"${pageContext.request.contextPath}/UploadServlet",

                type:"post",

                data:form,

                processData:false,

                contentType:false,

                success:function(data){

         

                    console.log(data);

                }

            });

java部分

文件初始化的逻辑

编辑

 

接收文件块数据,在这个逻辑中我们接收文件块数据。控件对数据进行了优化,可以方便调试。如果用监控工具可以看到控件提交的数据。

编辑

 

注:

1. 上面的java部分的代码可以直接使用,只需要将上传的图片路径及收集数据并将数据写入到数据库即可

2. 上面上传文件使用到了字节流,其实还可以使用别的流,这个需要读者自己在下面完善测试

3. BeanUtils是一个工具 便于将实体对应的属性赋给实体

4. 上传文件不能使用 request.getParameter("")获取参数了,而是直接将request解析,通过判断每一项是文件还是非文件,然后进行相应的操作(文件的话就是用流来读取,非文件的话,暂时保存到一个map中。)

后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库

示例下载地址:

 jsp-eclipse:https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

 jsp-myeclipse:https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

 jsp-springboot:https://gitee.com/xproer/jsp-springboot/tree/6.5.38/

详细配置信息及思路

欢迎入群一起讨论:374992201

标签:文件,form,上传,超大,JavaScript,ajax,jsp,data
From: https://www.cnblogs.com/zyzzz/p/16869508.html

相关文章

  • javaScript简单的赋值运算符
    <----------------------------------------------赋值运算符------------------------------------------------------------>=号是赋值操作+=是加等于号,和(n=n+1)是......
  • ​给前端开发者的 14 个 JavaScript 代码优化建议
    英文|https://blog.bitsrc.io/14-javascript-code-optimization-tips-for-front-end-developers-a44763d3a0da作者| MahdhiRezvi译文| https://github.com/xitu/gold......
  • 用于现代JavaScript的Observer API
    英文| https://dev.to/codyjasonbennett作者|CodyBennettObserverAPI(观察者API)释放了Web隐藏的超能力,以创建真正的响应式体验,从懒加载关键内容到非侵入式性能监控。在......
  • 18行JavaScript代码构建一个倒数计时器
    英文|https://www.sitepoint.com   作者|NilsonJacques​有时候,你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。你可......
  • 14个 JavaScript 中鲜为人知的技巧
    英文| http://developer.51cto.com/art/201912/607686.htm人们通常认为JavaScript是一门很容易上手的语言,但是要做到精通却不简单。是的,这是因为JavaScript是一种非......
  • HTML5 WEB怎么实现大文件上传
    ​ 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以500G来进行限制。PC端全平......
  • CSharp WEB怎么实现大文件上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • 8 个常用的JavaScript 比较运算符,你一定要知道
    英文|https://javascript.plainenglish.io/the-8-javascript-comparison-operators-you-need-to-know-cb952090d087翻译| 杨小爱1、相等我们将讨论的第一个比较运算符是......
  • 【JavaScript 教程】第六章 数组03— Stack :使用 Array 的push()和pop()方法实现堆栈
    英文 | https://www.javascripttutorial.net/译文|杨小爱在上节,我们学习了JavaScriptArray length属性以及如何正确处理它,错过的小伙伴可以点击文章《​​【JavaScrip......
  • JavaScript数组去重—ES6的两种方式
    说明JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种......