您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript 大文件分片上传处理

时间:2022-05-10 14:29:24  来源:  作者:一瞬看电影

JAVAScript 大文件分片上传处理

javaweb上传文件

上传文件的jsp中的部分

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

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

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

<div class="bbxx wrap">

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

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

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

</div>

</form>

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

this.post_file = function ()

{

$.each(this.ui.btn, function (i, n) { n.hide();});

this.ui.btn.stop.show();

this.State = this.Config.state.Posting;//

this.App.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });

};

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

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

$.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请求通知服务端进行初始化操作

this.md5_complete = function (json)

{

this.fileSvr.md5 = json.md5;

this.ui.msg.text("MD5计算完毕,开始连接服务器...");

this.event.md5Complete(this, json.md5);//biz event

 

var loc_path = encodeURIComponent(this.fileSvr.pathLoc);

var loc_len = this.fileSvr.lenLoc;

var loc_size = this.fileSvr.sizeLoc;

var param = jQuery.extend({}, this.fields, this.Config.bizData, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });

 

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

, url: this.Config["UrlCreate"]

, data: param

, success: function (sv)

{

_this.svr_create(sv);

}

, error: function (req, txt, err)

{

_this.Manager.RemoveQueuePost(_this.fileSvr.id);

alert("向服务器发送MD5信息错误!" + req.responseText);

_this.ui.msg.text("向服务器发送MD5信息错误");

_this.ui.btn.cancel.show();

_this.ui.btn.stop.hide();

}

, complete: function (req, sta) { req = null; }

});

};

 

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

this.post_complete = function (json)

{

this.fileSvr.perSvr = "100%";

this.fileSvr.complete = true;

$.each(this.ui.btn, function (i, n)

{

n.hide();

});

this.ui.process.css("width", "100%");

this.ui.percent.text("(100%)");

this.ui.msg.text("上传完成");

this.Manager.arrFilesComplete.push(this);

this.State = this.Config.state.Complete;

//从上传列表中删除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//从未上传列表中删除

this.Manager.RemoveQueueWait(this.fileSvr.id);

 

var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };

 

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

, url: _this.Config["UrlComplete"]

, data: param

, success: function (msg)

{

_this.event.fileComplete(_this);//触发事件

_this.post_next();

}

, error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误!" + req.responseText); }

, complete: function (req, sta) { req = null; }

});

};

 

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

this.post_complete_quick = function ()

{

this.fileSvr.perSvr = "100%";

this.fileSvr.complete = true;

this.ui.btn.stop.hide();

this.ui.process.css("width", "100%");

this.ui.percent.text("(100%)");

this.ui.msg.text("服务器存在相同文件,快速上传成功。");

this.Manager.arrFilesComplete.push(this);

this.State = this.Config.state.Complete;

//从上传列表中删除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//从未上传列表中删除

this.Manager.RemoveQueueWait(this.fileSvr.id);

//添加到文件列表

this.post_next();

this.event.fileComplete(this);//触发事件

};

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

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

文件初始化的逻辑,主要代码如下

FileInf fileSvr= new FileInf();

fileSvr.id = id;

fileSvr.fdChild = false;

fileSvr.uid = Integer.parseInt(uid);

fileSvr.nameLoc = PathTool.getName(pathLoc);

fileSvr.pathLoc = pathLoc;

fileSvr.lenLoc = Long.parseLong(lenLoc);

fileSvr.sizeLoc = sizeLoc;

fileSvr.deleted = false;

fileSvr.md5 = md5;

fileSvr.nameSvr = fileSvr.nameLoc;

 

//所有单个文件均以uuid/file方式存储

PathBuilderUuid pb = new PathBuilderUuid();

fileSvr.pathSvr = pb.genFile(fileSvr.uid,fileSvr);

fileSvr.pathSvr = fileSvr.pathSvr.replace("\","/");

 

DBConfig cfg = new DBConfig();

DBFile db = cfg.db();

FileInf fileExist = new FileInf();

 

boolean exist = db.exist_file(md5,fileExist);

//数据库已存在相同文件,且有上传进度,则直接使用此信息

if(exist && fileExist.lenSvr > 1)

{

fileSvr.nameSvr = fileExist.nameSvr;

fileSvr.pathSvr = fileExist.pathSvr;

fileSvr.perSvr = fileExist.perSvr;

fileSvr.lenSvr = fileExist.lenSvr;

fileSvr.complete = fileExist.complete;

db.Add(fileSvr);

 

//触发事件

up6_biz_event.file_create_same(fileSvr);

}//此文件不存在

else

{

db.Add(fileSvr);

//触发事件

up6_biz_event.file_create(fileSvr);

 

FileBlockWriter fr = new FileBlockWriter();

fr.CreateFile(fileSvr.pathSvr,fileSvr.lenLoc);

}

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

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try

{

files = upload.parseRequest(request);

}

catch (FileUploadException e)

{// 解析文件数据错误

out.println("read file data error:" + e.toString());

return;

 

}

 

FileItem rangeFile = null;

// 得到所有上传的文件

Iterator fileItr = files.iterator();

// 循环处理所有文件

while (fileItr.hasNext())

{

// 得到当前文件

rangeFile = (FileItem) fileItr.next();

if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))

{

pathSvr = rangeFile.getString();

pathSvr = PathTool.url_decode(pathSvr);

}

}

 

boolean verify = false;

String msg = "";

String md5Svr = "";

long blockSizeSvr = rangeFile.getSize();

if(!StringUtils.isBlank(blockMd5))

{

md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());

}

 

verify = Integer.parseInt(blockSize) == blockSizeSvr;

if(!verify)

{

msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;

}

 

if(verify && !StringUtils.isBlank(blockMd5))

{

verify = md5Svr.equals(blockMd5);

if(!verify) msg = "block md5 error";

}

 

if(verify)

{

//保存文件块数据

FileBlockWriter res = new FileBlockWriter();

//仅第一块创建

if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));

res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);

up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

 

JSONObject o = new JSONObject();

o.put("msg", "ok");

o.put("md5", md5Svr);

o.put("offset", blockOffset);//基于文件的块偏移位置

msg = o.toString();

}

rangeFile.delete();

out.write(msg);

 

注:

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

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

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

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

 

JavaScript 大文件分片上传处理

 

小伙伴们有兴趣想了解内容和更多相关学习资料的请点赞收藏+评论转发+关注我,后面会有很多干货。

 

作者:webuploader1

原文出处:
https://blog.51cto.com/u_14023400/3006210



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
JavaScript 大文件分片上传处理javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求1.通过form表单向后端发送请求...【详细内容】
2022-05-10  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
JavaScript 对象JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。JavaScript 对象JavaScript 提供多个内建对象,比如 String、D...【详细内容】
2022-05-05  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
JavaScript黑科技:直接运行AST(抽象语法树)实现一个AST解释器一段JavaScript代码,经过语法分析、语法分析等编译过程之后,会形成一个对应的AST(抽象语法树),形如: AST是一个JSON格式...【详细内容】
2022-04-19  Tags: JavaScript  点击:(23)  评论:(0)  加入收藏
核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法。何为 image-rendering?CSS 属性 image-rendering 用于设置图像缩放算法。它适用于...【详细内容】
2022-04-13  Tags: JavaScript  点击:(42)  评论:(0)  加入收藏
为了安全考虑,很多有登录行为的网站,会对密码输入框进行保护。本文介绍一种使用安全键盘的输入保护方式,可用于防键盘记录、防止自动点击。 效果展示如下图,该输入框带有一个虚...【详细内容】
2022-04-13  Tags: JavaScript  点击:(27)  评论:(0)  加入收藏
在开始本章正式内容之前先补充讲一下前面章节没有讲到的一个小细节问题。在我们每次关闭DevEco Studio不要直接点击右上角的关闭按钮,而是选择菜单“文件 > 关闭项目” 这样...【详细内容】
2022-04-12  Tags: JavaScript  点击:(44)  评论:(0)  加入收藏
前言为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数据发生变化,依赖该数据的函...【详细内容】
2022-03-30  Tags: JavaScript  点击:(47)  评论:(0)  加入收藏
消息对话框:是内置函数。将结果直接以对话框的形式直观地显示结果。常用的消息对话框有3种。警示对话框(alert)、确认对话框(confirm)和提示对话框(prompt)3种。1. 警示对话框警示...【详细内容】
2022-03-18  Tags: JavaScript  点击:(62)  评论:(0)  加入收藏
【CSDN 编者按】从1995年开始,本文作者Dr.Axel Rauschmayer就专门从事JavaScript和Web开发,已经有30多年了。2010年,他获得慕尼黑大学信息学博士学位。自2011年以来,他一直在2al...【详细内容】
2022-03-17  Tags: JavaScript  点击:(50)  评论:(0)  加入收藏
JavaScript 继承全解析(建议收藏)在大多数的编程语言中,继承都是一个重要的主题。 在那些基于类的编程语言中,继承提供了两个有用的服务。首先,它是代码重用的一种形式。如果一个...【详细内容】
2022-03-15  Tags: JavaScript  点击:(36)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript 大文件分片上传处理javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求1.通过form表单向后端发送请求...【详细内容】
2022-05-10  一瞬看电影    Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
前言 首先,我们看一下微信开放文档中的一张图: 上面的一幅图中清楚地介绍了微信登录整个过程,下面对图上所示进行总结: 一、二维码的获得 用户打开登录网页后,登录网页后台根据微...【详细内容】
2022-05-06  马克-1949    Tags:nodejs   点击:(6)  评论:(0)  加入收藏
JavaScript 对象JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。JavaScript 对象JavaScript 提供多个内建对象,比如 String、D...【详细内容】
2022-05-05  小焱2018    Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
JavaScript黑科技:直接运行AST(抽象语法树)实现一个AST解释器一段JavaScript代码,经过语法分析、语法分析等编译过程之后,会形成一个对应的AST(抽象语法树),形如: AST是一个JSON格式...【详细内容】
2022-04-19  修丹道的程序猿    Tags:JavaScript   点击:(23)  评论:(0)  加入收藏
为了安全考虑,很多有登录行为的网站,会对密码输入框进行保护。本文介绍一种使用安全键盘的输入保护方式,可用于防键盘记录、防止自动点击。 效果展示如下图,该输入框带有一个虚...【详细内容】
2022-04-13  修丹道的程序猿    Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
记录一个简单的使用,前后端开发过程中常常会遇到null值返回,为了忽略null值字段(可能是不需要的字段,所以我们需要忽略这些字段,我们可以使用这个注解)。简单的一个知识点,希望对你...【详细内容】
2022-04-12  烫手的砖    Tags:json   点击:(38)  评论:(0)  加入收藏
背景大数据的 ETL(Extract-Transfer-Load) 过程的 Transfer 阶段,需要对 json 串数据进行转换“拍平”处理。亲测!超好用 Hive 内置的 json 解析函数 一文中详细介绍过 get_js...【详细内容】
2022-03-31  andy.W    Tags:Hive   点击:(58)  评论:(0)  加入收藏
前言为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数据发生变化,依赖该数据的函...【详细内容】
2022-03-30  海椰人  博客园  Tags:JavaScript   点击:(47)  评论:(0)  加入收藏
提示:底部有完整的源码,童鞋们有需要可以CTRL + C拿走,但我建议你能真正理解实现原理,而不是直接CTRL + C。树是JS中非常常见的数据结构。知识库目录,侧边栏菜单,字典目录,企业组织...【详细内容】
2022-03-22  前端梁哥    Tags:JS   点击:(123)  评论:(0)  加入收藏
消息对话框:是内置函数。将结果直接以对话框的形式直观地显示结果。常用的消息对话框有3种。警示对话框(alert)、确认对话框(confirm)和提示对话框(prompt)3种。1. 警示对话框警示...【详细内容】
2022-03-18  不懈的追求    Tags:消息对话框   点击:(62)  评论:(0)  加入收藏
站内最新
站内热门
站内头条