首页 > 其他分享 >webuploader http大文件断点续传上传

webuploader http大文件断点续传上传

时间：2023-06-28 16:55:21浏览次数：41  
标签：function 断点续传 http 文件 id webuploader 上传 源码 fileSvr

​

 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中。）

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

效果展示：

​编辑

​编辑

​编辑

​编辑

 

视频演示：

 

windows控件安装,,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS测试,asp.net-阿里云(oss)测试,asp.net-华为云(obs)测试,jsp-springboot测试,ActiveX(x86)源码编译,ActiveX(x64)源码编译,Windows(npapi)源码编译,macOS源码编译,Linux(x86_64)源码编译,Linux(arm)源码编译,Linux(mips-uos)源码编译,Linux(mips-kylin-涉密环境)源码编译,sm4加密传输,压缩传输,

示例下载地址

源代码文档

asp.net源码下载，jsp-springboot源码下载，jsp-eclipse源码下载，jsp-myeclipse源码下载，php源码下载，csharp-winform源码下载，vue-cli源码下载，c++源码下载

详细配置信息及思路


​

标签：function,断点续传,http,文件,id,webuploader,上传,源码,fileSvr
From： https://www.cnblogs.com/songsu/p/17511844.html

相关文章

  • csharp http大文件断点续传上传
    ​IE的自带下载功能中没有断点续传功能，要实现断点续传功能，需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时，服务端都要添加这两个响应头，以保证客户端和服务端将此下载识别为可以断点续传......
  • linux http嗅探工具 httpry
    httpry是http版的tcpdump，它提供了实时的数据抓取、展示，也可以写入到文件，以供后续分析，相比较tcpdump，它抓取展示http更加直观。通常我们会抓取请求并写入文件httpry-i网卡名字-mmethod-b输出文件名字使用ifconfig命令查看网卡名字,如果不指定，默认是第一个网卡。-m指定http请求......
  • http 301、302、304、400、405、415状态码解释
     301movedpermanently、302found、303seeother301/302/303都表示重定向，所以放在一起讲解。301表示永久重定向（301movedpermanently），表示请求的资源分配了新url，以后应使用新url。302表示临时性重定向（302found），请求的资源临时分配了新url，本次请求暂且使用新url。302与301的区别......
  • wireshark https 抓包
    概述网上wireshark监听https的教程非常少，基本都是转载的同一篇，并且我实践后并不好使，没有办法，只能自己钻研。在了解了wireshark的基本用法后，终于解决了这个问题。注意，由于https是加密的，所以，虽然可以抓取到数据包，但是是密文。解决办法https的端口号是443，所以我们监听这个端口号，并且只......
  • https 原理分析进阶-模拟https通信过程
    大家好，我是蓝胖子，之前出过一篇https的原理分析，完整的介绍了https概念以及通信过程，今天我们就来比较完整的模拟实现https通信的过程，通过这篇文章，你能了解到https核心的概念以及原理，https证书是如何申请的，以及如何用golang实现https通信，https双向认证。本章代码已经上传到github......
  • Linux使用HTTP隧道代理模板
    以下是一个使用HTTP隧道代理的Linux模板：1.首先，确保你已经安装了curl和socat工具。如果没有安装，可以使用以下命令进行安装：```sudoapt-getinstallcurlsocat```2.创建一个名为proxy.sh的脚本文件，并将以下内容复制到文件中：```bash#!/bin/bash#设置代理服务器的地址和端口PROXY_H......
  • Python使用HTTP代码示例模版
    以下是一个使用Python发送HTTP请求的示例代码模板：```pythonimportrequests#发送GET请求defsend_get_request(url,params=None,headers=None):response=requests.get(url,params=params,headers=headers)returnresponse#发送POST请求defsend_post_request(url,data=Non......
  • asp.net http大文件断点续传上传
    ​ 需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步：前端修改由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify......
  • VUE http大文件断点续传上传
    ​ 对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传，从上传的效率来看，利用多线程并发上传能够达到最大效率。 本文是基于springboot+vue实现的文件上传，本文主要介绍服务端实现文件......
  • 接口测试（2）--HTTP协议，HTTPS协议
    HTTP协议：是超文本传输协议，它主要规定了在互联网中传输数据时的标准。主要用于定义客户端与web端服务器通讯的格式。HTTP协议工作于客户端-服务端上。浏览器作为HTTP客户端，通过URL向，HTTP服务端即WEB服务器，发送所有请求。HTTP特点：支持客户端/服务器模式，简单快速，灵活，无连接，无......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99