当前位置:首页 » 网页前端 » web断点续传控件
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web断点续传控件

发布时间: 2022-06-17 08:31:19

❶ 求web 以上超大文件上传和断点续传服务器的实现

web 以上超大文件上传和断点续传服务器的实现
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中。)

❷ web讯雷能断点续传吗

可以,只要不是IE下载都可以断点传续的

❸ 如何在web上实现断点续传

分块传输。就是把大文件分成若干个小块来传。事实上许多上传类也是这么做的。
如果想断点,那就必须在上传过程中有实时数据保存,是实时生成临时文件,而且有记录,传到什么位置了,以防断点。
等文件全部传输完成 再重组上传的每个临时块文件。

❹ 如何实现HTML5文件断点续传

实现HTML5文件断点续传

一、实现文件多选

HTML5的<input>新增了"multiple"属性,该属性可接受多个值的文件上传字段
<input type="file" multiple="multiple" name="file" id="file">
添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了
二、实现文件从计算机拖拽到网页以及添加文件队列功能
这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能
其中 dragover 用来处理在指定的元素上移动时的事件,这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件
document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件来处理鼠标松开时候的事件,此时应该将用户拖动过来的文件加入到上传队列中,以供后续的处理
document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files属性可以获取到所有拖动选择的文件,通过遍历可以读取到所有文件的信息。
// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
var files = evt.dataTransfer.files;
// addfile 方法 用来添加上传文件队列,在input的change事件中也需要调用
// 该方法首先检查有无文件正在上传中,如果有就将后续加入的文件放到上传队列中,如果没有文件正在上传就直接执行上传命令
addfile(files);
}
三、文件续传原理
目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来说明断点上传的思路。
说来说去,断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器,但是这看似简单的上传过程却有着无数的坑。
首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。
因此在文件开始上传之前,我们和服务器要有一个“握手”的过程,告诉服务器文件信息,然后和服务器约定切片的大小,当和服务器达成共识之后就可以开始后续的文件传输了。
前台要把每一块的文件传给后台,成功之后前端和后端都要标识一下,以便后续的断点。
当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分,如果是的话,那么我们可以接着上次的进度继续传文件,以达到续传的功能。
四、文件的前端切片
有了HTML5 的 File api之后切割文件比想想的要简单的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
参数start是开始切片的位置,end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上传
上一部我们通过slice方法把文件分成了若干块,接下来要做的事情就是把这些碎片传到服务器上。
这里我们用ajax的post请求来实现
textpop-up

var xhr = new XMLHttpRequest();
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判断文件是否上传成功,如果成功继续上传下一块,如果失败重试该快
}
xhr.upload.onprogress = function(e){
// 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度
// e.loaded 该片文件上传了多少
// e.totalSize 该片文件的总共大小
}
xhr.send(packet);

❺ 有没有可能Web上实现断点续传

其实断点续传的原理很简单,就是在Http的请求上和一般的下载有所不同而已。 打个比方,浏览器请求服务器上的一个文时

❻ http断点续传控件2.7.87.21366有什么用

你要长连接 那就得用Socket

支持不支持是要靠你代码实现的。。。
给你一个思路:下载一个文件 你一开始是可以得到文件的字节数组形式的,而下载的那个字节流,你取了多少,也就是说每次取1024个字节,取了100次,也就是0到102400个字节被你下载下来了,那你应该有100次记录了下载的进度,也就是这次获取到哪个数据下标了,那么100次后断了重新下载,你就可以直接从你记录好的第100+1次开始下载,之前的就可以无视掉了~~~

http协议一个特点就是 客户端的每次请求都要求建立一次单独的连接,在处理完本次请求后,就自动释放连接。

❼ JAVA WEB怎么实现大文件上传

解决这种大文件上传不太可能用web上传的方式,只有自己开发插件或是当门客户端上传,或者用现有的ftp等。
1)开发一个web插件。用于上传文件。
2)开发一个FTP工具,不用web上传。
3)用现有的FTP工具。
下面是几款不错的插件,你可以试试:
1)Jquery的uploadify插件。具体使用。你可以看帮助文档。
2)网上有一个Web大文件断点续传控件:http://www.cnblogs.com/xproer/archive/2012/02/17/2355440.html
此控件支持100G文件的断点续传操作,提供了完善的开发文档,支持文件MD5验证,支持文件批量上传。
JavaUploader免费开源的,是用applet实现的,需要签名才能在浏览器上用,支持断点。缺点是收费。
3)applet也是一种方式,MUPLOAD组件就是以APPLET方式处理的。
如果你不需要访问用户的硬盘文件,那你可以使用FTP上传,也支持断点。但只要你访问用户磁盘,又要支持断点,那必须要签名的。不然浏览器不知道你的身份。

❽ 网吧Web迅雷的断点续传问题(急)赏20分!!~~

注意检查文件下载路径要一样.不能有一丝改变...
文件是否被破坏.或改变..
我没见过这种情况,这种断点续传不知道WEB支不支持..
你还是在检察检察..

不好意思不能帮到你

❾ java web断点续传,我用的是fileupload来做的上传。

使用Struts2上传文件:

Struts文件上传需要使用File Upload Filter。Filter Upload Filter使用一些默认的规则:

Form中的<s:file name="image"></s:file>标签对应着Action类中的三个属性分别是:上传文件(java.io.File类型),文件名(java.lang.String类型),文件类型(java.lang.String类型,例如:image/jpeg)。命名规约为:

文件:名字与<s:file>标签中的name属性一致,这里为:image

文件名:文件 + FileName,这里为:imageFileName

文件类型:文件 + ContentType,这里为:imageContentType

所以针对上述<s:file name="image"></s:file>表示啊的上传文件的JSP和Action类被别为:

imageUpload.jsp:

[html]view plain

  • <%@pagecontentType="text/html;charset=UTF-8"language="java"%>

  • <%@taglibprefix="s"uri="/struts-tags"%>

  • <html>

  • <head><title>ImageUpload</title></head>

  • <body>

  • <h1>ImageUploadPage</h1>

  • <s:formaction="imageUpload"method="post"enctype="multipart/form-data">

  • <s:filename="image"></s:file>

  • <s:submit></s:submit>

  • </s:form>

  • </body>

  • </html>



  • ImageUploadAction.java:

    [html]view plain

  • packagecom.jpleasure;

  • importcom.opensymphony.xwork2.ActionSupport;

  • importjava.io.File;

  • importjava.io.InputStream;

  • importjava.io.FileInputStream;

  • importjava.io.FileNotFoundException;

  • {

  • privateFileimage;

  • privateStringimageFileName;

  • privateStringimageContentType;

  • publicFilegetImage(){

  • returnimage;

  • }

  • publicvoidsetImage(Fileimage){

  • this.image=image;

  • }

  • publicStringgetImageFileName(){

  • returnimageFileName;

  • }

  • publicvoidsetImageFileName(StringimageFileName){

  • this.imageFileName=imageFileName;

  • }

  • (){

  • returnimageContentType;

  • }

  • publicvoidsetImageContentType(StringimageContentType){

  • this.imageContentType=imageContentType;

  • }

  • publicStringexecute(){

  • if(image!=null){

  • System.out.println("filenameis:"+this.imageFileName);

  • System.out.println("filecontenttypeis:"+this.imageContentType);

  • System.out.println("filelengthis:"+this.image.length());

  • }

  • returnSUCCESS;

  • }

  • }



  • Struts.xml配置文件:

    [html]view plain

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <result>/success.jsp</result>

  • </action>

  • 这样当我们选中上传文件,提交的时候:文件内容会以File类型的方式放在image声明的变量中。文件的名字将会被放在imageFileName命名的变量中,文件的类型被放在imageContentType命名的变量中。

    文件下载:

    文件下载需要使用一个特殊的Result,stream类型的Result。Stream类型的Result主要用来处理文件下载操作。

    处理原理为:所有的下载文件都是将一个二进制的流写入到HttpResponse中去。在Action类中定义一个InputSream类型的二进制流,在Result返回给用户的时候返回给用户。

    扩展上述的代码,将上传来的文件直接下载给用户:

    ImageUploadAction中需要追加一个InputSream类型的对象,并且指向上传的文件,代码如下,红色部分表示变化:

    [html]view plain

  • packagecom.jpleasure;

  • importcom.opensymphony.xwork2.ActionSupport;

  • importjava.io.File;

  • importjava.io.InputStream;

  • importjava.io.FileInputStream;

  • importjava.io.FileNotFoundException;

  • {

  • privateFileimage;

  • privateStringimageFileName;

  • privateStringimageContentType;

  • =null;

  • (){

  • returnimageInputStream;

  • }

  • publicvoidsetImageInputStream(InputStreamimageInputStream){

  • this.imageInputStream=imageInputStream;

  • }

  • publicFilegetImage(){

  • returnimage;

  • }

  • publicvoidsetImage(Fileimage){

  • this.image=image;

  • }

  • publicStringgetImageFileName(){

  • returnimageFileName;

  • }

  • publicvoidsetImageFileName(StringimageFileName){

  • this.imageFileName=imageFileName;

  • }

  • (){

  • returnimageContentType;

  • }

  • publicvoidsetImageContentType(StringimageContentType){

  • this.imageContentType=imageContentType;

  • }

  • publicStringexecute(){

  • if(image!=null){

  • System.out.println("filenameis:"+this.imageFileName);

  • System.out.println("filecontenttypeis:"+this.imageContentType);

  • System.out.println("filelengthis:"+this.image.length());

  • try{

  • this.imageInputStream=newFileInputStream(image);

  • }catch(FileNotFoundExceptione){

  • e.printStackTrace();

  • }

  • }

  • returnSUCCESS;

  • }

  • }



  • 配置文件为,红色为变化部分:

    [html]view plain

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <resultname="success"type="stream">

  • <paramname="contentType">image/pjpeg</param>

  • <paramname="inputName">imageInputStream</param>

  • <paramname="contentDisposition">attachment;filename="image.jpg"</param>

  • <paramname="bufferSize">1024</param>

  • </result>

  • </action>



  • ContentType表示下载文件的类型。

    InputName表示Action类中用来下载文件的字段的名字。

    ContentDisposition用来控制文件下载的一些信息,包括是否打开另存对话框,下载文件名等。

    BufferSize表示文件下载时使用的缓冲区的大小。

    实际项目开发的考虑:

    控制上传文件的类型和最大允许上传文件的size

    使用File Upload Intercepter的参数可盈控制上传文件的类型和最大允许上传文件的size。例如:

    [html]view plain

  • <struts>

  • <packagename="myPackage"extends="struts-default">

  • <interceptor-refname="fileUpload">

  • <paramname="maximumSize">2MB</param>

  • <paramname="allowedTypes">text/html,image/jpeg</param>

  • </interceptor-ref>

  • <interceptor-refname="basicStack"/>

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <resultname="success"type="stream">

  • <paramname="contentType">image/pjpeg</param>

  • <paramname="inputName">imageInputStream</param>

  • <paramname="contentDisposition">

  • attachment;filename="image.jpg"

  • </param>

  • <paramname="bufferSize">1024</param>

  • </result>

  • </action>

  • </package>

  • </struts>



  • 上述表示允许上传jpeg和html类型的文件,且最大文件上传size为2MB

    显示错误信息:

    可以使用如下key表示的message来显示文件上传出错的提示信息:

    消息Key 说明

    struts.messages.error.uploading 文件无法正常上传时的公共错误

    struts.messages.error.file.too.large 文件大小超过最大允许size时的错误提示

    struts.messages.error.content.type.not.allowed 文件类型不在上传文件允许类型中的错误提示

❿ 求一个 WEB可断点续传的控件,用于上传大文件。

FlashFXP