B/S文件夹上传下载组件 – 泽优软件博客 http://blog.ncmem.com/wordpress 荆门泽优软件有限公司官方博客 Wed, 13 May 2026 05:40:41 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.7.5 .net文件夹上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/net%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 09:25:13 +0000 http://blog.ncmem.com/wordpress/?p=1500 继续阅读 .net文件夹上传下载组件]]>

相关资料:产品首页,控件包白皮书,白皮书(图文版),产品介绍,产品比较,控件源码文档,开发文档,成功案例,基础组件,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,Linux-deb控件安装,Linux-rpm控件安装,安装引导,控件布署,控件升级,IE9加载控件,IE8加载控件

解决方案:党政央企国防军工房地产档案管理教育医疗工程管理企业文件传输解决方案

标杆案例:中国港湾中国中车中国石油中国石化,长江电力中信证券上海通用一汽大众,沈阳自动化研究所,

示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)

教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6

视频教程:windows控件安装,mac控件安装,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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加密传输,压缩传输,jsp-eclipse-sm4加密存储,jsp-springboot-sm4加密存储,asp.net-sm4加密存储

ASP.NET教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),

jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs

php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),

二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程

相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,

联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,

       

产品交流群:泽优Web大文件上传控件

 

视频教程:https://www.ixigua.com/7200367234802418187

 

最新版本:6.5.41

在线代码:https://gitee.com/xproer/up6-asp-net/tree/6.5.41/



安装.NET Framework 4.7.2

  https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472

框架选择4.7.2

 

添加3rd引用

 


编译项目

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

SQL

使用IIS

大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息


检查数据库配置

访问页面进行测试

 

相关参考:

文件保存位置

 

大文件上传控件(up6

个人版:http://www.ncmem.com/webapp/up6/purchase.aspx

政企版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=ent

年费版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=year

OEM版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=oem

源码版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=code

免费下载源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

免费下载授权器:https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

 

大文件上传下载控件(up6-down2

政企版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=ent

年费版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=year

OEM版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=oem

源码版:http://www.ncmem.com/webapp/up6/purchase.aspx?type=code

源码工程文档:https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

免费下载源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

免费下载授权器:https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

]]> js文件夹上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/js%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 08:41:02 +0000 http://blog.ncmem.com/wordpress/?p=1498 继续阅读 js文件夹上传下载组件]]> 相关资料:产品首页,控件包,白皮书,白皮书(图文版),产品介绍,产品比较,源码工程文档,开发文档,成功案例,基础组件,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,Linux-deb控件安装,Linux-rpm控件安装,安装引导,控件布署,控件升级,IE9加载控件,IE8加载控件,

示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)

教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6

视频教程:windows控件安装,mac控件安装,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),

jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs

php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),

二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程

相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,

联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,

        

产品交流群:泽优Web大文件上传控件

视频教程:https://www.bilibili.com/video/BV1jm4y127Ut/?vd_source=d1843c7f8c164416779b5188178bad8c

环境:vue2-cli

示例:https://gitee.com/xproer/up6-vue-cli

 

1.下载示例

将up6组件复制到项目中

示例中已经包含此目录

 

1.引入up6组件

 

2.配置接口地址

接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表

参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

 

3.处理事件

 

启动测试

 

启动成功

 

访问测试页面

 

效果

 

数据库

 

下载产品源代码-泽优全平台开源大文件上传控件(up6)

免费下载源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

免费下载授权器:https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

]]>
asp.net文件夹上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/asp-net%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 08:00:03 +0000 http://blog.ncmem.com/wordpress/?p=1496 继续阅读 asp.net文件夹上传下载组件]]> 相关资料:解决方案,白皮书,产品介绍,产品比较,开发文档,成功案例,基础组件,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,Linux-deb控件安装,Linux-rpm控件安装,安装引导,控件布署,控件升级,IE9加载控件,IE8加载控件,

示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)

教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6

视频教程:windows控件安装,mac控件安装,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),

jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs

php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),

二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程

相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,

联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,

        

产品交流群:泽优Web大文件上传控件

 

视频教程:https://www.bilibili.com/video/BV1Vs4y1b7yh/?vd_source=d1843c7f8c164416779b5188178bad8c

 

框架:.NET Framework 4.7.2

版本:6.5.41

示例:https://gitee.com/xproer/up6-asp-net/tree/6.5.41/

 

安装.NET Framework 4.7.2

https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472

百度网盘:https://pan.baidu.com/s/13CGIHrRDSc1pPc-gR8miog?pwd=bnbl

 

框架选择4.7.2

 

添加3rd引用

 

编译项目

 

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

 

SQL

使用IIS

大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息

 

检查数据库配置

点击“清空数据库”链接,测试数据库配置是否正确

 

访问页面进行测试

 

检查数据库数据

 

检查上传的文件

 

相关参考:

文件保存位置

免费下载产品源代码-泽优全平台开源大文件传输解决方案(up6-down2)

源码工程文档:https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

免费下载源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

免费下载授权器:https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

]]>
java文件夹上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/java%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 07:07:38 +0000 http://blog.ncmem.com/wordpress/?p=1494 继续阅读 java文件夹上传下载组件]]> 核心原理:

 

该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。

* 如何分片;

* 如何合成一个文件;

* 中断了从哪个分片开始。

如何分,利用强大的js库,来减轻我们的工作,市场上已经能有关于大文件分块的轮子,虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系,我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。

如何合,在合之前,我们还得先解决一个问题,我们如何区分分块所属那个文件的。刚开始的时候,我是采用了前端生成了唯一uuid来做文件的标志,在每个分片请求上带上。不过后来在做秒传的时候我放弃了,采用了Md5来维护分块和文件关系。

在服务端合并文件,和记录分块的问题,在这方面其实行业已经给了很好的解决方案了。参考迅雷,你会发现,每次下载中的时候,都会有两个文件,一个文件主体,另外一个就是文件临时文件,临时文件存储着每个分块对应字节位的状态。

这些都是需要前后端密切联系才能做好,前端需要根据固定大小对文件进行分片,并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后,服务器只需要按照请求数据中给的分片序号和每片分块大小(分片大小是固定且一样的)算出开始位置,与读取到的文件片段数据,写入文件即可。

为了便于开发,我 将服务端的业务逻辑进行了如下划分,分成初始化,块处理,文件上传完毕等。

服务端的业务逻辑模块如下

 

功能分析:

文件夹生成模块

 

文件夹上传完毕后由服务端进行扫描代码如下

 

分块上传,分块处理逻辑应该是最简单的逻辑了,up6已经将文件进行了分块,并且对每个分块数据进行了标识,这些标识包括文件块的索引,大小,偏移,文件MD5,文件块MD5(需要开启)等信息,服务端在接收这些信息后便可以非常方便的进行处理了。比如将块数据保存到分布式存储系统中

 

分块上传可以说是我们整个项目的基础,像断点续传、暂停这些都是需要用到分块。

分块这块相对来说比较简单。前端是采用了webuploader,分块等基础功能已经封装起来,使用方便。

借助webUpload提供给我们的文件API,前端就显得异常简单。

前台HTML模板

 

分则必合。把大文件分片了,但是分片了就没有原本文件功能,所以我们要把分片合成为原本的文件。我们只需要把分片按原本位置写入到文件中去。因为前面原理那一部我们已经讲到了,我们知道分块大小和分块序号,我就可以知道该分块在文件中的起始位置。所以这里使用RandomAccessFile是明智的,RandomAccessFile能在文件里面前后移动。但是在andomAccessFile的绝大多数功能,已经被JDK1.4的NIO的“内存映射文件(memory-mapped files)”取代了。我在该项目中分别写了使用RandomAccessFile与MappedByteBuffer来合成文件。分别对应的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。两个方法代码如下。

秒传功能

 

服务端逻辑

秒传功能,相信大家都体现过了,网盘上传的时候,发现上传的文件秒传了。其实原理稍微有研究过的同学应该知道,其实就是检验文件MD5,记录下上传到系统的文件的MD5,在一个文件上传前先获取文件内容MD5值或者部分取值MD5,然后在匹配系统上的数据。

Breakpoint-http实现秒传原理,客户端选择文件之后,点击上传的时候触发获取文件MD5值,获取MD5后调用系统一个接口(/index/checkFileMd5),查询该MD5是否已经存在(我在该项目中用redis来存储数据,用文件MD5值来作key,value是文件存储的地址。)接口返回检查状态,然后再进行下一步的操作。相信大家看代码就能明白了。

嗯,前端的MD5取值也是用了webuploader自带的功能,这还是个不错的工具。

控件计算完文件MD5后会触发md5_complete事件,并传值md5,开发者只需要处理这个事件即可,

断点续传

up6已经自动对断点续传进行了处理,不需要开发都再进行单独的处理。

在f_post.jsp中接收这些参数,并进行处理,开发者只需要关注业务逻辑,不需要关注其它的方面。

断点续传,就是在文件上传的过程中发生了中断,人为因素(暂停)或者不可抗力(断网或者网络差)导致了文件上传到一半失败了。然后在环境恢复的时候,重新上传该文件,而不至于是从新开始上传的。

前面也已经讲过,断点续传的功能是基于分块上传来实现的,把一个大文件分成很多个小块,服务端能够把每个上传成功的分块都落地下来,客户端在上传文件开始时调用接口快速验证,条件选择跳过某个分块。

实现原理,就是在每个文件上传前,就获取到文件MD5取值,在上传文件前调用接口(/index/checkFileMd5,没错也是秒传的检验接口)如果获取的文件状态是未完成,则返回所有的还没上传的分块的编号,然后前端进行条件筛算出哪些没上传的分块,然后进行上传。

当接收到文件块后就可以直接写入到服务器的文件中

这是文件块上传的效果

这是文件夹上传完后的效果

这是文件夹上传完后在服务端的存储结构

参考文章: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/

]]>
web文件上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/web%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 02:46:13 +0000 http://blog.ncmem.com/wordpress/?p=1492 继续阅读 web文件上传下载组件]]> 最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。

在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成。

下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用PHP进行示例编写。

本文相关示例代码位于github上,主要参考

聊聊大文件上传

大文件切割上传

文件上传的几种方式

首先我们来看看文件上传的几种方式。

普通表单上传

使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单,并指定表单的提交内容类型为enctype=”multipart/form-data”,表明表单需要上传二进制数据。

然后编写index.php上传文件接收代码,使用move_uploaded_file方法即可(php大法好…)

form表单上传大文件时,很容易遇见服务器超时的问题。通过xhr,前端也可以进行异步上传文件的操作,一般由两个思路。

文件编码上传

第一个思路是将文件进行编码,然后在服务端进行解码,之前写过一篇在前端实现图片压缩上传的博客,其主要实现原理就是将图片转换成base64进行传递

varimgURL = URL.createObjectURL(file);

ctx.drawImage(imgURL, 0, 0);

// 获取图片的编码,然后将图片当做是一个很长的字符串进行传递

vardata= canvas.toDataURL( “image/jpeg”, 0.5);

在服务端需要做的事情也比较简单,首先解码base64,然后保存图片即可

$imgData = $_REQUEST[ ‘imgData’];

$base64 = explode( ‘,’, $imgData)[ 1];

$img = base64_decode($base64);

$url = ‘./test.jpg’;

if(file_put_contents($url, $img)) {

exit(json_encode( array(

url => $url

)));

}

base64编码的缺点在于其体积比原图片更大(因为Base64将三个字节转化成四个字节,因此编码后的文本,会比原文本大出三分之一左右),对于体积很大的文件来说,上传和解析的时间会明显增加。

更多关于base64的知识,可以参考Base64笔记。

除了进行base64编码,还可以在前端直接读取文件内容后以二进制格式上传

// 读取二进制文件

functionreadBinary(text){

vardata = newArrayBuffer(text.length);

varui8a = newUint8Array(data, 0);

for( vari = 0; i < text.length; i++){

ui8a[i] = (text.charCodeAt(i) & 0xff);

}

console.log(ui8a)

}

varreader = newFileReader;

reader. = function{

readBinary( this.result) // 读取result或直接上传

}

// 把从input里读取的文件内容,放到fileReader的result字段里

reader.readAsBinaryString(file);

formData异步上传

FormData对象主要用来组装一组用 发送请求的键/值对,可以更加灵活地发送Ajax请求。可以使用FormData来模拟表单提交。

letfiles = e.target.files // 获取input的file对象

letformData = newFormData;

formData.append( ‘file’, file);

axios.post(url, formData);

服务端处理方式与直接form表单请求基本相同。

iframe无刷新页面

在低版本的浏览器(如IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的,其取值有

_self,默认值,在相同的窗口中打开响应页面

_blank,在新窗口打开

_parent,在父窗口打开

_top,在最顶层的窗口打开

framename,在指定名字的iframe中打开

如果需要让用户体验异步上传文件的感觉,可以通过framename指定iframe来实现。把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。

functionupload{

varnow = + newDate

varid = ‘frame’+ now

$( “body”).append( `<iframe style=”display:none;” name=”${id}” id=”${id}” />`);

var$form = $( “#myForm”)

$form.attr({

“action”: ‘/index.php’,

“method”: “post”,

“enctype”: “multipart/form-data”,

“encoding”: “multipart/form-data”,

“target”: id

}).submit

$( “#”+id).on( “load”, function{

varcontent = $( this).contents.find( “body”).text

try{

vardata = JSON.parse(content)

} catch(e){

console.log(e)

}

})

}

大文件上传

现在来看看在上面提到的几种上传方式中实现大文件上传会遇见的超时问题,

表单上传和iframe无刷新页面上传,实际上都是通过form标签进行上传文件,这种方式将整个请求完全交给浏览器处理,当上传大文件时,可能会遇见请求超时的情形

通过fromData,其实际也是在xhr中封装一组请求参数,用来模拟表单请求,无法避免大文件上传超时的问题

编码上传,我们可以比较灵活地控制上传的内容

大文件上传最主要的问题就在于:在同一个请求中,要上传大量的数据,导致整个过程会比较漫长,且失败后需要重头开始上传。试想,如果我们将这个请求拆分成多个请求,每个请求的时间就会缩短,且如果某个请求失败,只需要重新发送这一次请求即可,无需从头开始,这样是否可以解决大文件上传的问题呢?

综合上面的问题,看来大文件上传需要实现下面几个需求

支持拆分上传请求(即切片)

支持断点续传

支持显示上传进度和暂停上传

接下来让我们依次实现这些功能,看起来最主要的功能应该就是切片了。

文件切片

参考: 大文件切割上传

编码方式上传中,在前端我们只要先获取文件的二进制内容,然后对其内容进行拆分,最后将每个切片上传到服务端即可。

在Java中,文件FIle对象是Blob对象的子类,Blob对象包含一个重要的方法slice,通过这个方法,我们就可以对二进制文件进行拆分。

下面是一个拆分文件的示例,对于up6来说开发者不需要关心拆分的细节,由控件帮助实现,开发者只需要关心业务逻辑即可。

控件上传的时候会为每一个文件块数据添加相关的信息,开发者在服务端接收到数据后可以自已进行处理。

服务器接收到这些切片后,再将他们拼接起来就可以了,下面是PHP拼接切片的示例代码

对于up6来说,开发人员不需要进行拼接,up6已经提供了示例代码,已经实现了这个逻辑。

保证唯一性,控件会为每一个文件块添加信息,如块索引,块MD5,文件MD5

断点续传

up6自带续传功能,up6在服务端已经保存了文件的信息,在客户端也保存了文件的进度信息。在上传时控件会自动加载文件进度信息,开发者不需要关心这些细节。在文件块的处理逻辑中只需要根据文件块索引来识别即可。

此时上传时刷新页面或者关闭浏览器,再次上传相同文件时,之前已经上传成功的切片就不会再重新上传了。

服务端实现断点续传的逻辑基本相似,只要在getUploadSliceRecord内部调用服务端的查询接口获取已上传切片的记录即可,因此这里不再展开。

此外断点续传还需要考虑切片过期的情况:如果调用了mkfile接口,则磁盘上的切片内容就可以清除掉了,如果客户端一直不调用mkfile的接口,放任这些切片一直保存在磁盘显然是不可靠的,一般情况下,切片上传都有一段时间的有效期,超过该有效期,就会被清除掉。基于上述原因,断点续传也必须同步切片过期的实现逻辑。

续传效果

 

上传进度和暂停

通过xhr.upload中的progress方法可以实现监控每一个切片上传进度。

上传暂停的实现也比较简单,通过xhr.abort可以取消当前未完成上传切片的上传,实现上传暂停的效果,恢复上传就跟断点续传类似,先获取已上传的切片列表,然后重新发送未上传的切片。

由于篇幅关系,上传进度和暂停的功能这里就先不实现了。

实现效果:

 

小结

目前社区已经存在一些成熟的大文件上传解决方案,如七牛SDK,腾讯云SDK等,也许并不需要我们手动去实现一个简陋的大文件上传库,但是了解其原理还是十分有必要的。

本文首先整理了前端文件上传的几种方式,然后讨论了大文件上传的几种场景,以及大文件上传需要实现的几个功能

通过Blob对象的slice方法将文件拆分成切片

整理了服务端还原文件所需条件和参数,演示了PHP将切片还原成文件

通过保存已上传切片的记录来实现断点续传

还留下了一些问题,如:合并文件时避免内存溢出、切片失效策略、上传进度暂停等功能,并没有去深入或一一实现,继续学习吧

后端代码逻辑大部分是相同的,目前能够支持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/

]]>
jsp文件上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/jsp%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 02:19:32 +0000 http://blog.ncmem.com/wordpress/?p=1490 继续阅读 jsp文件上传下载组件]]> 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。

首先我们需要了解的是上传文件三要素:

1.表单提交方式:post (get方式提交有大小限制,post没有)

2.表单的enctype属性:必须设置为multipart/form-data.

3.表单必须有文件上传项:file,且文件项需要给定name值

上传文件夹需要增加一个属性webkitdirectory,像这样:

<input id=”fileFolder” name=”fileFolder” type=”file”  webkitdirectory>

不过webkitdirectory属性有个问题,只能支持高版本的chrome,不能支持低版本的IE,如ie6,ie7,ie8,不能做到全浏览器适配,运行环境比较单一。

js中可以判断文件夹中文件数量及文件夹大小是否符合要求,不符合要求不能向后台提交:

前台HTML模板

this.GetHtmlFiles = function()

{

     var acx = “”;

     acx += ‘<div class=”file-item” id=”tmpFile” name=”fileItem”>\

                <div class=”img-box”><img name=”file” src=”js/file.png”/></div>\

                   <div class=”area-l”>\

                       <div class=”file-head”>\

                            <div name=”fileName” class=”name”>HttpUploader程序开发.pdf</div>\

                            <div name=”percent” class=”percent”>(35%)</div>\

                            <div name=”fileSize” class=”size” child=”1″>1000.23MB</div>\

                    </div>\

                       <div class=”process-border”><div name=”process” class=”process”></div></div>\

                       <div name=”msg” class=”msg top-space”>15.3MB 20KB/S 10:02:00</div>\

                   </div>\

                   <div class=”area-r”>\

                    <span class=”btn-box” name=”cancel” title=”取消”><img name=”stop” src=”js/stop.png”/><div>取消</div></span>\

                    <span class=”btn-box hide” name=”post” title=”继续”><img name=”post” src=”js/post.png”/><div>继续</div></span>\

                       <span class=”btn-box hide” name=”stop” title=”停止”><img name=”stop” src=”js/stop.png”/><div>停止</div></span>\

                       <span class=”btn-box hide” name=”del” title=”删除”><img name=”del” src=”js/del.png”/><div>删除</div></span>\

                   </div>’;

     acx += ‘</div>’;

     //文件夹模板

     acx += ‘<div class=”file-item” name=”folderItem”>\

                   <div class=”img-box”><img name=”folder” src=”js/folder.png”/></div>\

                   <div class=”area-l”>\

                       <div class=”file-head”>\

                            <div name=”fileName” class=”name”>HttpUploader程序开发.pdf</div>\

                            <div name=”percent” class=”percent”>(35%)</div>\

                            <div name=”fileSize” class=”size” child=”1″>1000.23MB</div>\

                    </div>\

                       <div class=”process-border top-space”><div name=”process” class=”process”></div></div>\

                       <div name=”msg” class=”msg top-space”>15.3MB 20KB/S 10:02:00</div>\

                   </div>\

                   <div class=”area-r”>\

                    <span class=”btn-box” name=”cancel” title=”取消”><img name=”stop” src=”js/stop.png”/><div>取消</div></span>\

                    <span class=”btn-box hide” name=”post” title=”继续”><img name=”post” src=”js/post.png”/><div>继续</div></span>\

                       <span class=”btn-box hide” name=”stop” title=”停止”><img name=”stop” src=”js/stop.png”/><div>停止</div></span>\

                       <span class=”btn-box hide” name=”del” title=”删除”><img name=”del” src=”js/del.png”/><div>删除</div></span>\

                   </div>’;

     acx += ‘</div>’;

     //上传列表

     acx += ‘<div class=”files-panel” name=”post_panel”>\

                   <div name=”post_head” class=”toolbar”>\

                       <span class=”btn” name=”btnAddFiles”>选择多个文件</span>\

                       <span class=”btn” name=”btnAddFolder”>选择文件夹</span>\

                       <span class=”btn” name=”btnPasteFile”>粘贴文件和目录</span>\

                       <span class=”btn” name=”btnSetup”>安装控件</span>\

                   </div>\

                   <div class=”content” name=”post_content”>\

                       <div name=”post_body” class=”file-post-view”></div>\

                   </div>\

                   <div class=”footer” name=”post_footer”>\

                       <span class=”btn-footer” name=”btnClear”>清除已完成文件</span>\

                   </div>\

              </div>’;

     return acx;

};

选择文件,选择文件夹,粘贴文件和文件夹的逻辑

this.open_files = function (json)

{

     for (var i = 0, l = json.files.length; i < l; ++i)

    {

         this.addFileLoc(json.files[i]);

     }

     setTimeout(function () { _this.PostFirst(); },500);

};

this.open_folders = function (json)

{

    for (var i = 0, l = json.folders.length; i < l; ++i) {

        this.addFolderLoc(json.folders[i]);

    }

     setTimeout(function () { _this.PostFirst(); }, 500);

};

this.paste_files = function (json)

{

     for (var i = 0, l = json.files.length; i < l; ++i)

     {

         this.addFileLoc(json.files[i]);

     }

};

后台在接收文件夹时不同之处在需要用MultipartHttpServletRequest

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);

     }

}

 

server端的包和类

 

 

文件块处页面,验证代码部分

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);

 

生成文件名称的逻辑

public String genFile(int uid, String md5,String nameLoc) throws IOException

{

     SimpleDateFormat fmtDD = new SimpleDateFormat(“dd”);

     SimpleDateFormat fmtMM = new SimpleDateFormat(“MM”);

     SimpleDateFormat fmtYY = new SimpleDateFormat(“yyyy”);

    

     Date date = new Date();

     String strDD = fmtDD.format(date);

     String strMM = fmtMM.format(date);

     String strYY = fmtYY.format(date);

    

     String path = this.getRoot() + “/”;

     path = path.concat(strYY);

     path = path.concat(“/”);

     path = path.concat(strMM);

     path = path.concat(“/”);

     path = path.concat(strDD);

     path = path.concat(“/”);

     path = path.concat(md5);

     path = path.concat(“.”);

     path = path.concat(PathTool.getExtention(nameLoc));

        

    

     File fl = new File(path);

    

     return fl.getCanonicalPath();//

}

 

以下是service层做的处理:

整体模块划分如下:

 

其中数据类实体逻辑处理如下

public class FileInf {

 

     public FileInf(){}

     public String id=””;

     public String pid=””;

    public String pidRoot=””;   

     /**  * 表示当前项是否是一个文件夹项。    */

     public boolean fdTask=false;        

     //   /// 是否是文件夹中的子文件  /// </summary>

     public boolean fdChild=false;

     /**  * 用户ID。与第三方系统整合使用。    */

     public int uid=0;

     /**  * 文件在本地电脑中的名称   */

     public String nameLoc=””;

     /**  * 文件在服务器中的名称。   */

     public String nameSvr=””;

     /**  * 文件在本地电脑中的完整路径。示例:D:\Soft\QQ2012.exe */

     public String pathLoc=””;  

     /**  * 文件在服务器中的完整路径。示例:F:\\ftp\\uer\\md5.exe     */

     public String pathSvr=””;

     /**  * 文件在服务器中的相对路径。示例:/www/web/upload/md5.exe   */

     public String pathRel=””;

     /**  * 文件MD5    */

     public String md5=””;

     /**  * 数字化的文件长度。以字节为单位,示例:120125    */

     public long lenLoc=0;

     /**  * 格式化的文件尺寸。示例:10.03MB   */

     public String sizeLoc=””;

     /**  * 文件续传位置。  */

     public long offset=0;

     /**  * 已上传大小。以字节为单位 */

     public long lenSvr=0;

     /**  * 已上传百分比。示例:10%  */

     public String perSvr=”0%”;

     public boolean complete=false;

     public Date PostedTime = new Date();

     public boolean deleted=false;

     /**  * 是否已经扫描完毕,提供给大型文件夹使用,大型文件夹上传完毕后开始扫描。  */

     public boolean scaned=false;

}

后台数据库中的逻辑基本上都用到了上面的实体类

文件数据表操作类如下

加载所有未完成的文件列表

public String GetAllUnComplete(int f_uid)

{

     StringBuilder sb = new StringBuilder();

     sb.append(“select “);

     sb.append(” f_id”);

     sb.append(“,f_fdTask”);    

     sb.append(“,f_nameLoc”);

     sb.append(“,f_pathLoc”);

     sb.append(“,f_md5”);

     sb.append(“,f_lenLoc”);

     sb.append(“,f_sizeLoc”);

     sb.append(“,f_pos”);

     sb.append(“,f_lenSvr”);

     sb.append(“,f_perSvr”);

     sb.append(“,f_complete”);

     sb.append(“,f_pathSvr”);//fix(2015-03-16):修复无法续传文件的问题。

     sb.append(” from up6_files “);//change(2015-03-18):联合查询文件夹数据

     sb.append(” where f_uid=? and f_deleted=0 and f_fdChild=0 and f_complete=0 and f_scan=0″);//fix(2015-03-18):只加载未完成列表

 

     ArrayList<FileInf> files = new ArrayList<FileInf>();

     DbHelper db = new DbHelper();

     PreparedStatement cmd = db.GetCommand(sb.toString());

     try {

         cmd.setInt(1, f_uid);

         ResultSet r = db.ExecuteDataSet(cmd);

         while(r.next())

         {

              FileInf f          = new FileInf();

              f.uid              = f_uid;

              f.id               = r.getString(1);

              f.fdTask      = r.getBoolean(2);              

              f.nameLoc          = r.getString(3);

              f.pathLoc          = r.getString(4);

              f.md5              = r.getString(5);

              f.lenLoc      = r.getLong(6);

              f.sizeLoc          = r.getString(7);

              f.offset      = r.getLong(8);

              f.lenSvr      = r.getLong(9);

              f.perSvr      = r.getString(10);

              f.complete         = r.getBoolean(11);

              f.pathSvr     = r.getString(12);//fix(2015-03-19):修复无法续传文件的问题。

              files.add(f);

             

         }

         r.close();

         cmd.getConnection().close();

         cmd.close();

     } catch (SQLException e) {

         // TODO Auto-generated catch block

         e.printStackTrace();

     }

    

     if(files.size() < 1) return null;

    

     Gson g = new Gson();

    return g.toJson( files);//bug:arrFiles为空时,此行代码有异常

}

实现后的整体效果如下

 

文件夹上传完后的效果

 

服务器保存的文件夹数据,而且层级结构与本地客户端是一致的。这在OA系统中,或者网盘系统中使用时是非常有用的

 

后端代码逻辑大部分是相同的,目前能够支持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/

]]>
flash文件上传下载组件 http://blog.ncmem.com/wordpress/2019/12/06/flash%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Fri, 06 Dec 2019 01:10:42 +0000 http://blog.ncmem.com/wordpress/?p=1488 继续阅读 flash文件上传下载组件]]> 版权所有 2009-2023 荆门泽优软件有限公司

保留所有权利

相关资料:产品首页,白皮书,白皮书(图文版),产品介绍,产品比较,成功案例,基础组件,控件源代码,个人版报价单,年费版采购说明,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,Linux-deb控件安装,Linux-rpm控件安装,安装引导,控件布署,控件升级,IE9加载控件,IE8加载控件,

控件包:cab(x86)控件包,cab(x64)控件包,chrome(45-)控件包,firefox控件包,exe安装包,exe安装包(开机启动),集成包(up6+down2),macOS控件包,Linux-x86-deb安装包,Linux-x86-deb集成包(up6+down2),linux-x86-uos安装包,linux-x86-uos集成包(up6+down2),linux-x86-rpm安装包,linux-x86-rpm集成包(up6+down2),linux-arm-deb安装包,linux-arm-deb集成包(up6+down2),linux-arm-uos安装包,linux-arm-uos集成包(up6+down2),linux-arm-rpm安装包,linux-arm-rpm集成包(up6+down2),linux-mips-deb安装包,linux-mips-deb集成包(up6+down2),linux-mips-uos安装包,linux-mips-uos集成包(up6+down2),linux-mips-银河麒麟安装包,linux-mips-银河麒麟集成包(up6+down2)

示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)

教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6

视频教程:windows控件安装,mac控件安装,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),

jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs

php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),

二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程

相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,

联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,

*QQ群:374992201 *微信:jmzyqwl

产品交流群:泽优Web大文件上传控件

up6全面支持国产化平台,100G大文件,文件夹上传续传,支持windows,macOS,Linux下的所有主流浏览器,支持多种数据库,所有Web服务器,为企业提供数据安全传输,安全存储,分布式存储等核心功能。

注意:部分系统由于使用struts框架可能导致f_post.jsp页面接收和返回信息被拦截,请考虑将f_post.jsp改为struts方式实现。

1.前端引用

1.1将up6目录复制到项目中

1.2在页面中引入JS,并初始化组件

您可以在任何页面引入并使用组件。

2.后端引用

2.1将up6相关类复制到项目中

2.2将api接口复制到项目中

您也可以修改或重新实现这些接口逻辑,以满足您自已的业务需求。

3.配置文件引入

up6的部分功能由配置文件来配置,您需要将配置文件也引入到您的项目中

引入后检查配置文件路径

 

效果:

参考:

SpringMVC拦截放行参考:https://blog.csdn.net/linmengmeng_1314/article/details/82596081

放行对f_post.jsp的拦截。

]]>
内网/外网大文件上传解决方案 http://blog.ncmem.com/wordpress/2019/11/13/%e5%86%85%e7%bd%91-%e5%a4%96%e7%bd%91%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/ Wed, 13 Nov 2019 02:19:37 +0000 http://blog.ncmem.com/wordpress/?p=1188 继续阅读 内网/外网大文件上传解决方案]]> 版权所有 2009-2023 荆门泽优软件有限公司

保留所有权利

相关资料:产品首页,白皮书,白皮书(图文版),产品介绍,产品比较,成功案例,基础组件,控件源代码,个人版报价单,年费版采购说明,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,Linux-deb控件安装,Linux-rpm控件安装,安装引导,控件布署,控件升级,IE9加载控件,IE8加载控件,

控件包:cab(x86)控件包,cab(x64)控件包,chrome(45-)控件包,firefox控件包,exe安装包,exe安装包(开机启动),集成包(up6+down2),macOS控件包,Linux-x86-deb安装包,Linux-x86-deb集成包(up6+down2),linux-x86-uos安装包,linux-x86-uos集成包(up6+down2),linux-x86-rpm安装包,linux-x86-rpm集成包(up6+down2),linux-arm-deb安装包,linux-arm-deb集成包(up6+down2),linux-arm-uos安装包,linux-arm-uos集成包(up6+down2),linux-arm-rpm安装包,linux-arm-rpm集成包(up6+down2),linux-mips-deb安装包,linux-mips-deb集成包(up6+down2),linux-mips-uos安装包,linux-mips-uos集成包(up6+down2),linux-mips-银河麒麟安装包,linux-mips-银河麒麟集成包(up6+down2)

示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)

教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6

视频教程:windows控件安装,mac控件安装,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),

jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)

jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs

php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),

二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程

相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,

联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,

*QQ群:374992201 *微信:jmzyqwl

产品交流群:泽优Web大文件上传控件

up6全面支持国产化平台,100G大文件,文件夹上传续传,支持windows,macOS,Linux下的所有主流浏览器,支持多种数据库,所有Web服务器,为企业提供数据安全传输,安全存储,分布式存储等核心功能。

注意:部分系统由于使用struts框架可能导致f_post.jsp页面接收和返回信息被拦截,请考虑将f_post.jsp改为struts方式实现。

1.前端引用

1.1将up6目录复制到项目中

1.2在页面中引入JS,并初始化组件

您可以在任何页面引入并使用组件。

2.后端引用

2.1将up6相关类复制到项目中

2.2将api接口复制到项目中

您也可以修改或重新实现这些接口逻辑,以满足您自已的业务需求。

3.配置文件引入

up6的部分功能由配置文件来配置,您需要将配置文件也引入到您的项目中

引入后检查配置文件路径

 

效果:

参考:

SpringMVC拦截放行参考:https://blog.csdn.net/linmengmeng_1314/article/details/82596081

放行对f_post.jsp的拦截。

]]>
html5文件夹上传下载组件 http://blog.ncmem.com/wordpress/2019/11/12/html5%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/ Tue, 12 Nov 2019 09:24:42 +0000 http://blog.ncmem.com/wordpress/?p=1183 继续阅读 html5文件夹上传下载组件]]> 相关资料:解决方案,白皮书,产品介绍,产品比较产品源代码开发文档,成功案例,基础组件,示例下载,控件包,控件升级,在线演示,在线文档,并发能力,上传速度,下载速度,Windows控件安装,macOS控件安装,deb包安装,rpm包安装,安装引导,控件部署,控件升级,IE9加载控件,IE8加载控件,
示例下载:asp.net-vs2013,asp.net-vs2010,jsp-eclipse,jsp-springboot,jsp-myeclipse,php,vue-cil,WinForm(C#),C++(WTL)
教程:WinForm(C#)测试,WTL(C++)测试,在vue.js中使用,在vue-cli中使用,eclipse导入up6
源码编译:ActiveX(x86)ActiveX(x64)npapiNativeMessagemacOSLinux(兆芯,海光)arm(鲲鹏,飞腾)龙芯(mips)龙芯(loongarch),
视频教程:解决方案,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,asp.net-IIS测试,asp.net-阿里云(oss)测试,asp.net-华为云(obs)测试,jsp-springboot测试,sm4加密传输,压缩传输,
ASP.NET教程:asp.net,IIS Express,IIS,IIS-Https,Oracle,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)
jsp-eclipse教程:测试教程,oracle,mysql,SQL Server,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs),
jsp-springboot教程:测试教程,minio,fastdfs,阿里云对象存储(oss),华为云对象存储(obs)
jsp-myeclipse教程:mysql,oracle,SQL Server,fastdfs
php教程:测试教程,minio,fastdfs,阿里云对象存储(oss),
二次开发:组件引用,自定义事件,自定义业务字段,自定义文件保存路径,授权码,加密存储,加密传输,使用Minio存储,使用FastDFS存储,使用达梦数据库,数据表字段设计,监控fd_create流程,监控f_create流程,监控f_list.jsp流程
相关问题:WebSocket连接失败,md5计算完毕后卡住,域名未授权,网站安全系统拦截,
联系我们:QQ:1269085759(技术),QQ:3040217208(售后),QQ:1085617561(商务),微信:13235643658,邮箱:1269085759@qq.com,1085617561@qq.com,qwl@ncmem.com,
        

视频教程:https://www.bilibili.com/video/BV1jm4y127Ut/?vd_source=d1843c7f8c164416779b5188178bad8c

环境:vue2-cli

示例:https://gitee.com/xproer/up6-vue-cli

 

1.下载示例

 

将up6组件复制到项目中

示例中已经包含此目录

 

1.引入up6组件

 

2.配置接口地址

接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表

参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

 

3.处理事件

 

启动测试

 

启动成功

 

访问测试页面

 

效果

 

数据库

 

下载产品源代码-泽优全平台开源大文件上传控件(up6)

免费下载源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

免费下载授权器:https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

]]>