首页 > 编程语言 >java 超大文件上传_Java+超大文件上传

java 超大文件上传_Java+超大文件上传

时间:2023-11-24 12:12:24浏览次数:38  
标签:文件 插件 断点续传 超大 file 上传 服务端

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足。小小开心了一把。

但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件。以现在我们的网速,恐怕再快也得传半小时。要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来。这种用户体验简直太糟糕了。所以,断点续传就十分有必要了。什么是续传我就不解释了,用QQ传文件这么多年,大家都见过了。

这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交,服务端取到该文件后再进行转移、重命名等操作,因此,无法实时保存文件的已上传部分。而且在http协议下,我们无法保持浏览器与服务端的长连接,不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点:对上传的文件进行分割,每次只上传一小片。服务端接收到文件后追加到原来部分,最后合并成完整的文件。

每次上传文件片前先获取已上传的文件大小,确定本次应切割的位置

每次上传完成后更新已上传文件大小的记录

标识客户端和服务端的文件,保证不会把A文件的内容追加到B文件上

在参考了张鑫旭大哥的这篇文章后,我将学到的技术应用在了我的插件Huploadify中,成功的添加了断点续传功能。在此将技术和插件都分享给大家。

工作原理/技术要点

首先的首先,要明确,如果我们有一个10M的文件,每次切割上传1M,那么是需要发10次请求来完成的。在http协议下,只能这么搞。断点上传分三步来完成:选择一个文件后,获取该文件在服务器上的大小,通过本地存储或自定义的函数来获取。

根据已上传大小切割文件,发出n次请求不断向服务器提交文件片,服务端不断追加文件内容

当已上传文件大小达到文件总大小时,上传结束

首先是文件的分割,HTML5新增了Blob数据类型,并且提供了一个可以分割数据的方法:slice(),其用法和字符串、数组的slice()方法一样,可以截取一个二进制文件的一部分。

其次是文件片的保存与追加,我后台用PHP写的,先用file_get_contents获取文件的二进制格式,再用file_put_contents每次将文件追加,具体的写法可以参照后面,或者是下载我打包好的文件。

接下来我们还需要实时保存已上传文件的大小,以便于下次上传前进行正确切割。使用HTML5的localStorage是一种方法,将已上传的大小保存在本地,下次上传前先从本地读取。不过这种方式是很局限的,抛开用户可能通过各种管家清除掉本地数据不讲,假如用户在A页面上传了一个文件的50%,然后在B页面想把该文件上传到另外一个地方,结果从本地一读文件已上传50%了,直接从51%的位置开始上传了,显然是个错误。问题就在于本地不能存太多的信息,通过File API只能获取到文件的原始名称,无法正确的与服务器上的文件正确匹配。所以真正在项目中用,还得依靠服务端来保存这些数据。

关于如何将数据存在服务端,已经前端如何取数据,我在下面会讲到。

技术要点就上面的那么多了,其实也没有多少技术含量哈~来看看我的插件如何使用吧。

续传功能的使用方法

文件的引入就不讲了,可参考上一篇关于插件的介绍。关键点是新增的几个配置,先来看一下:

breakPoints:false,//是否开启断点续传 fileSplitSize:1024*1024,//断点续传的文件块大小,单位Byte,默认1M getUploadedSize:null,//类型:function,自定义获取已上传文件的大小函数,用于开启断点续传模式,可传入一个参数file,即当前上传的文件对象,需返回number类型 saveUploadedSize:null,//类型:function,自定义保存已上传文件的大小函数,用于开启断点续传模式,可传入两个参数:file:当前上传的文件对象,value:已上传文件的大小,单位Byte saveInfoLocal:false,//用于开启断点续传模式,是否使用localStorage存储已上传文件大小

这是插件中的默认配置值。一个续传功能竟然要配置五个项,真要命!不要着急听我慢慢道来,这五个并不是要同时出现的,是为了满足可能出现的复杂业务而准备的。

breakPoints是开启断点续传的开关,要使用的话设为true,默认是不开启的。

fileSplitSize是每次切割的文件片的大小,默认是1M,可根据实际情况来定。如果你的系统上传的文件普遍都在1G以上,可以配置的大一点。

getUploadedSize是用来自定义获取已上传的文件大小的函数,还记得上面说过的localStorage的局限吧,所以我这里直接把获取文件大小的函数交给你来定义,你可以从session、cookie,从文件、数据库或者任何地方取,可以发送一个ajax请求到你想要的地址,传递你需要的参数。注意你定义的函数将来会被插件调用,所以一定要返回一个Number类型的结果。

saveUploadedSize与getUploadedSize对应,你自己定义如何保存已上传文件的大小,只要你存的数据你自己能取到就OK。当然前提是你要注意到上面说过的localStorage的局限,确保你的逻辑正确能够操作到正确的文件。

saveInfoLocal是当你使用localStorage保存数据时需要开启的一个开关。插件默认提供使用localStorage方式的支持。只要开启此选项就可以了。当然,这种情况下你的业务逻辑必须足够简单,比如只是做一个上传的demo,或者这系统的用户只有你一个人,你明白如何避开那些局限的地方。

掌握了这五个配置的作用,你就可以实现一个足够灵活的断点上传功能了!在我打包好的文件里,提供了使用localStorage方式的demo,抱歉我无法将数据库表都发给你,所以只能用本地存储来演示。

在服务端保存数据

用户在使用上传的时候可能有各种你意想不到的操作,这里我发挥想象描述一下用户可能的行为:同一台机器使用不同帐号登录,上传同一个文件

文件上传了一部分,然后修改了文件内容,再次上传

文件上传完成100%,再次上传该文件

同一个页面有多个上传按钮,上传同一个文件,或在不同页面上传同一个文件

仅仅上面四条,是不是情况就够复杂了?再加上你系统还有自己的业务逻辑,所以在服务端保存已上传文件数据是非常有必要的。而且保存数据和获取数据的函数都交给你来定义,抱着插件有足够的灵活性。

因为涉及到了服务端的技术,无法演示,我将我项目中的真实使用场景在此讲解一下,来展示一下如何自已定义方法来实现服务端保存数据的可靠上传。我定义的getUploadedSize函数如下:

getUploadedSize:function(file){var data = {data : {fileName : file.name,lastModifiedDate : file.lastModifiedDate.getTime()}};var url = 'http://localhost/uploadfile/';var uploadedSize = 0;$.ajax({url : url,data : data,async : false,type : 'POST',success : function(returnData){returnData = JSON.parse(returnData);uploadedSize = returnData.uploadedSize;}});return uploadedSize;}

我向后台的某个地址发送一个请求,传递文件名和文件的最后修改时间为参数,后台根据这两个参数来找到与前台所选择的文件对应的服务器上的文件,将服务器返回的文件大小return出去,来被插件使用。为什么要传递这两个参数呢?我们在前台无法知道服务器上的这个文件的名称,所以使用原始文件名作为一个辅助标识。为了防止用户在两次上传间隔修改了文件,我们把文件的最后修改时间也传给服务端,让服务端进行比较,若时间不对应则返回已上传大小为0,重新上传此文件。

再来看后台都要做哪些工作。数据库中需要有一张表来记录每个已文件的情况,包含的字段大致有:字段描述

client_filename文件在客户端的原始名称

server_filename文件在服务器上重命名后的名称

last_modified_date文件的最后修改时间,时间戳

status文件的状态,已完成、未完成

uploaded_size已上传文件的大小

根据client_filename和last_modified_date,再加上系统中的其他关联信息,可以定位到本次上传的文件在服务端的大小,然后返回给客户端。当然这是我自己的用法,你也可以根据自己的需求灵活设计。总之最终的目的就是要找到前台选择的文件在服务器上真正对应的文件,并将已上传大小正确返回。

另外需注意的一点,就是在续传的第二步,不断提交文件片的过程中,也需要服务端准确定位到相应的文件,不能把A的数据追加到B上。采用的方式也是提交fileName和lastModifyDate两个参数(已写在插件内部,可服务端直接获取),服务端找到对应的文件进行追加。

另外再啰嗦一句,后台获取文件的时候需要取成二进制的,而我们提交是使用FormData来提交的,所以PHP代码需要这么写:file_put_contents('uploads/'.$filename,file_get_contents($_FILES["file"]["tmp_name"]),FILE_APPEND);

如果上面的说明还是不够清楚,就需要你自己来探索一下了,毕竟考虑到插件可能应用在复杂的系统中,很多工作还是需要你来做的。或者你也可以给我留言,我很乐意为你解答疑惑。

该版本的其他改动

从1.0到2.0,Huploadify又新加了很多东西,不过只是新加,使用方式跟之前的没有变化。例如上面的断点续传功能,你如果不想使用,只需设置breakPoints为false即可,插件仍按照以前的方式工作。除了断点续传这个大头,插件还做了如下改动:增加了onSelect回调函数,在选择了文件之后触发,用法与uploadify官网的一致

删除掉正在上传的文件,中断发送请求

完善了input file组件的accept属性支持,浏览时只显示运行的文件格式,就是这个东东:

 

 

4. 对外开放了方法调用接口,upload、stop、cancel、disable、ennable。我在demo中有演示。使用方法如下:var up = $('#upload').Huploadify({auto:false, fileTypeExts:'*.jpg;*.png;*.exe;*.mp3;*.mp4;*.zip;*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf', multi:true }); up.upload(1);//开始上传文件,接收一个参数,表示上传第几个文件,可传入*上传队列中的所有文件 up.stop();//暂停上传队列中的所有文件,不接收参数。用于开启了断点需传 up.cancel(1);//删除队列中的某个文件,接收一个参数,表示删除第几个文件,可传入*删除队列中的所有文件 up.disable();//使选择文件按钮失效,不接收参数 up.ennable();//使选择文件按钮生效,不接收参数  5. 修改其他已知bug

结束

插件刚刚完成,与我们的后端程序员调试完成了断点续传功能暂未发现问题,欢迎大家在使用的时候给我提任何问题。老实来讲这个功能使用起来还是挺费解的,为了最大程度的保证灵活做成这样,大家可以与我多多交流~

参考文章:http://blog.ncmem.com/wordpress/2023/11/24/java-%e8%b6%85%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0_java%e8%b6%85%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论

 

 

标签:文件,插件,断点续传,超大,file,上传,服务端
From: https://www.cnblogs.com/songsu/p/17853448.html

相关文章

  • 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicK
    报错内容 解决办法:在Web.config的<configuration></configuration>中添加如下代码即可。<configuration><runtime><assemblyBindingxmlns="urn:schemas-microsoft-com:asm.v1"><dependentAssembly><assembly......
  • 随笔(三十三)『apache FtpClient操作文件遇到的坑』
    1、需求扫描完文件后把文件放到backup备用目录下2、使用方案用了io流一行行读取用了ftpClient.retrieveFileStream(path)获取流用了ftpClient.changeWorkingDirectory(backupDirPath)切换目录判断是否需要创建备用目录用了ftpClient.rename(sourceFilePath,backupFilePath......
  • Windows共享文件夹
    正常共享流程报错解决方案添加完everyone用户即可进入共享盘......
  • QQ音乐播放本地音乐的时候播放列表不按文件名排序
    给孩子播放本地的凯叔三国演义,文件是从网上下载的,文件名都是按顺序的 可是导入QQ音乐播放器以后,文件名却变成了下面的样子度了许久,也用了Mp3tag批量修改了文件信息,都不行,最后才发现一个靠谱的回答 播放器左边有个《本地和下载》单击。。。。光标放到有问题的歌名上。。......
  • 可执行文件任意位置执行
    原文地址:https://www.cnblogs.com/liqinglucky/p/bin.html通常我们自己编译的可执行文件都是./执行。如果想做成系统任意目录可见,就可以将可执行文件拷贝到系统目录/usr/local/bin/。将自己的bin文件拷贝到系统目录。#cptest-bin-1.0.2/usr/local/bin/#ls/usr/local/bi......
  • UEC++头文件添加与函数查找方法
    1.官方函数查找与应用技巧在蓝图中插入函数(中文也可以),右键能看到库名;官网也能查找函数名和使用方法;C++中使用可以将蓝图转化2.UEC++头文件添加VS编译时缺失头文件会报错,ctrl单击调用的函数,进入.h文件中查看的地址,将地址classes后面的目录用#clucde放入如下图如果报错......
  • java 实现断点续传的上传功能
    下面是一个简单的实现Java断点续传上传功能的代码示例,其中使用了HttpURLConnection和RandomAccessFile类:publicclassResumableUploader{privatestaticfinalintBUFFER_SIZE=4096;privatestaticfinalStringFILE_PATH="yourFilePath";privatestaticfi......
  • js 大文件切片,中止上传,上传进度,断点续传
    大文件切片上传背景介绍:当涉及大文件上传时,一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担,还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传,并解释如何处理断点续传、并发控制以及上传取消等问题,用到的......
  • 基于JS的大文件分片
    项目需要上传超大文件,后台为DJANGO,不能直接用H5的FILEAPI来POST,所以采用slice分片在分片后为BLOB不能直接传,bolb转file有些浏览器又有支持问题。所以做一些转换,转uint8,uint16,uint32,django的后台处理起来都比较烦所以试着用base64装入json,很容易搞定。具体思路:1.读入文件路径2.按......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端......