SpringMVC实现浏览器端大文件分片上传_Mr_Zang666的博客-程序员ITS203

技术标签: html5  上传大文件的解决方案  vue.js  html  

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。在使用前需要配置一下数据库,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

欢迎入群一起讨论:374992201

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mr_Zang666/article/details/105136646

智能推荐

影视网站云服务器,影视网站云服务器_weixin_39955938的博客-程序员ITS203

影视网站云服务器 内容精选换一换云解析服务支持为域名快速添加网站解析,通过该功能可以简化解析记录的配置,包含如下两种场景:网站解析至IP地址:为域名的主域名和子域名分别添加一条A类型记录集网站解析至另一域名:为域名的主域名和子域名分别添加一条CNAME类型记录集已经通过域名注册商完成域名“example.com”的注册,并将域名添加至云解析服务,详细内容请参见创建公网域备案是中国大陆的一项法规,使...

冲刺阶段 - PMP易错概念(持续更新中)_杨林伟的博客-程序员ITS203

文章目录1. 基础概念2. 整合管理3. 范围管理4. 进度管理5. 成本管理6. 质量管理7. 资源管理8. 沟通管理9. 风险管理10. 采购管理11. 相关方管理1. 基础概念1. “管理层在项目管理方面缺乏经验” 不是 项目失败的原因。管理层可以不懂项目管理,但项目经理必须要非常精通项目管理,这里还有一个假设就是组织拥有非常充分的组织过程资产,即便经验不足,也可以去学习和借鉴组织过程资产。2. 子项目的划分,根据项目的复杂性来划分,以便更好的去管理与控制项目,子项目会细化工作,故增加工

c++ 二次开发 良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发..._昂图的博客-程序员ITS203

来源于https://blog.csdn.net/weixin_40659738/article/details/78252562在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行、护照办理中心、税务等,我们可能会注意到办公桌上摆着这样一台机器。办公人员用它拍摄各种证件、文件、表格,有时候还会拍摄人物面部照片。这个仪器的名字是高拍仪。正如你猜测的一样,高拍仪的本质就是...

数据集问题_weixin_30776273的博客-程序员ITS203

一、手动创建一个数据集 private void btnCreateSet_Click(object sender, EventArgs e) { //1.创建一个数据集 DataSet ds = new DataSet(); //2.创建一张表 DataTable dt = new D...

STL set的基本用法_成龙大侠的博客-程序员ITS203

1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132333435363738394041424344#include &amp;lt;iostream&amp;gt; #include &amp;lt;set&amp;gt;using namespace std;...

逻辑数据中心设计器简介 — 第一部分_可爱的排骨的博客-程序员ITS203

逻辑数据中心设计器简介 — 第一部分 发布日期: 6/14/2005 | 更新日期: 6/14/2005Mickey WilliamsNeudesic LLC摘要:了解该 Team Architect 版设计器如何帮助您对数据中心的所有操作方面进行建模,从而更方便地构建和部署数据中心。本页内容

随便推点

Webpack_苏废物~~的博客-程序员ITS203

Webpack一、市面上有哪些类似于Webpack的前端工程化工具gruntgulp ( 4.x )Browserify ( Webpack 前身 )Webpack 【 主流行 】rollup.js https://www.rollupjs.com/guide/zhparcelFIS https://fis.baidu.com/二、前端工程化工具的发展历程grunt...

玩Linux,Or被Linux玩?_我是不良人的博客-程序员ITS203

linux太难用了!(一通鼠标点击,进入/etc)学习linux,你忘记windows的思维方式了吗?怎么安装软件阿?那一堆文件是干什么的阿?学习linux,你还在浮躁吗?进入linux,随便按了几下.赶紧重启进入win学习linux,你用心了吗?.......首先,我想引用一下别人说过的一句话:除非在过去的十年你一直生活在山洞里,否则你一定听说过linux.

粒子群优化算法PSO_xuxinrk的博客-程序员ITS203

原文同进化算法(见博客《[Evolutionary Algorithm] 进化算法简介》,进化算法是受生物进化机制启发而产生的一系列算法)和人工神经网络算法(Neural Networks,简称NN,神经网络是从信息处理角度对人脑的神经元网络系统进行了模拟的相关算法)一样,群体智能优化算法也属于一种生物启发式方法,它们三者可以称为是人工智能领域的三驾马车(PS:实际上除了上述三种算法还有一些智...

Eureka无法使用iframe的内嵌页面访问或iframe内嵌Eureka报拒绝我们的链接请求的解决方法_振钧的博客-程序员ITS203_iframe拒绝了我们的连接请求怎么办

最近需要让eureka的管理页面能够嵌入到我们的后台管理中,我们使用标签,代码如下所示:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html, body { height: calc(100%); margin: 0; } &lt;/style&gt;&l

2021牛客多校赛第二场_YPO的博客-程序员ITS203

传送门ABC水题D水题EF计算几何求两球的体积并G动态规划HI模拟bfsJK模拟贪心LF(计算几何)题意:三维坐标系,给4个点A、B、C、D的坐标以及K1和K2两个数,满足|AX|&gt;=K1*|BX|的点X形成集合,满足|CY|&gt;=K2*|DY|的点Y形成集合。求X集合与Y集合并集的体积解析:首先当然需要知道X集合与Y集合大致长什么样子,推导式子很容易得知其实两个集合都是球,且可以得知球的球心与半径。那么之后就是求两个球的体积交了,套板子即可。#include &

android将布局保存成图片_狱火苍穹的博客-程序员ITS203

在项目有一个广告图制作的功能,简单说就是在特定的布局中添加图片和文字,最后将其保存成一张图片就OK了。 首先写一个布局,给个id,然后oncreate方法中设置:layout_1 = (RelativeLayout) findViewById(R.id.layout_1);layout_1.setDrawingCacheEnabled(true);layout_1.buildDrawingCa

推荐文章

热门文章

相关标签