单文件WebUploader做大文件的分块和断点续传

前言:

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

上面的一段话是来自 http://fex.baidu.com/webuploader/  的介绍,现在做的项目需要用到大文件的上传,之前没有做过,现有的jquery的uploadify只用于上传图片什么的小文件,查了网上的资料,这个插件好像对于大文件不是很友好,为了安全起见,使用百度的成熟框架,不论是多文件还是单个的大文件都是很好用的,没有很多的问题,关于webuploader的详细介绍看官网就行:

我的项目是javaweb,开发环境是MyEclipse,页面使用jsp

1、先将 webuploader-0.1.5.zip 这个文件下载下来:https://github.com/fex-team/webuploader/releases

根据个人的需求放置自己需要的东西就行,全部放到项目里也可以,下面是我自己需要的东西:

2、代码部分:分为jsp和servlet部分

1、jsp部分代码:

[html] view plain copy

  1. <script type="text/javascript">
  2. var fileMd5;
  3. //监听分块上传过程中的三个时间点
  4. WebUploader.Uploader.register({
  5. "before-send-file":"beforeSendFile",
  6. "before-send":"beforeSend",
  7. "after-send-file":"afterSendFile",
  8. },{
  9. //时间点1:所有分块进行上传之前调用此函数
  10. beforeSendFile:function(file){
  11. var deferred = WebUploader.Deferred();
  12. //1、计算文件的唯一标记,用于断点续传
  13. (new WebUploader.Uploader()).md5File(file,0,10*1024*1024)
  14. .progress(function(percentage){
  15. $(‘#item1‘).find("p.state").text("正在读取文件信息...");
  16. })
  17. .then(function(val){
  18. fileMd5=val;
  19. $(‘#item1‘).find("p.state").text("成功获取文件信息...");
  20. //获取文件信息后进入下一步
  21. deferred.resolve();
  22. });
  23. return deferred.promise();
  24. },
  25. //时间点2:如果有分块上传,则每个分块上传之前调用此函数
  26. beforeSend:function(block){
  27. var deferred = WebUploader.Deferred();
  28. $.ajax({
  29. type:"POST",
  30. url:"<%=basePath%>Video?action=checkChunk",
  31. data:{
  32. //文件唯一标记
  33. fileMd5:fileMd5,
  34. //当前分块下标
  35. chunk:block.chunk,
  36. //当前分块大小
  37. chunkSize:block.end-block.start
  38. },
  39. dataType:"json",
  40. success:function(response){
  41. if(response.ifExist){
  42. //分块存在,跳过
  43. deferred.reject();
  44. }else{
  45. //分块不存在或不完整,重新发送该分块内容
  46. deferred.resolve();
  47. }
  48. }
  49. });
  50. this.owner.options.formData.fileMd5 = fileMd5;
  51. deferred.resolve();
  52. return deferred.promise();
  53. },
  54. //时间点3:所有分块上传成功后调用此函数
  55. afterSendFile:function(){
  56. //如果分块上传成功,则通知后台合并分块
  57. $.ajax({
  58. type:"POST",
  59. url:"<%=basePath%>Video?action=mergeChunks",
  60. data:{
  61. fileMd5:fileMd5,
  62. },
  63. success:function(response){
  64. alert("上传成功");
  65. var path = "uploads/"+fileMd5+".mp4";
  66. $("#item1").attr("src",path);
  67. }
  68. });
  69. }
  70. });
  71. var uploader = WebUploader.create({
  72. // swf文件路径
  73. swf: ‘<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf‘,
  74. // 文件接收服务端。
  75. server: ‘<%=basePath%>UploadVideo‘,
  76. // 选择文件的按钮。可选。
  77. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  78. pick: {id: ‘#add_video‘,   <span style="background-color:rgb(255,204,0);">//这个id是你要点击上传文件的id,自己设置就好</span>
  79. multiple:false},
  80. // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  81. resize: true,
  82. auto:true,
  83. //开启分片上传
  84. chunked: true,
  85. chunkSize:10*1024*1024,
  86. accept: {
  87. //限制上传文件为MP4
  88. extensions: ‘mp4‘,
  89. mimeTypes: ‘video/mp4‘,
  90. }
  91. });
  92. // 当有文件被添加进队列的时候
  93. uploader.on( ‘fileQueued‘, function( file ) {
  94. $(‘#item1‘).empty();
  95. $(‘#item1‘).html(‘<div id="‘ + file.id + ‘" class="item">‘+
  96. ‘<a class="upbtn" id="btn" onclick="stop()">[取消上传]</a>‘+
  97. ‘<p class="info">‘ + file.name + ‘</p>‘ +
  98. ‘<p class="state">等待上传...</p></div>‘
  99. );
  100. });
  101. // 文件上传过程中创建进度条实时显示。
  102. uploader.on( ‘uploadProgress‘, function( file, percentage ) {
  103. $(‘#item1‘).find(‘p.state‘).text(‘上传中 ‘+Math.round(percentage * 100) + ‘%‘);
  104. });
  105. uploader.on( ‘uploadSuccess‘, function( file ) {
  106. $( ‘#‘+file.id ).find(‘p.state‘).text(‘已上传‘);
  107. });
  108. uploader.on( ‘uploadError‘, function( file ) {
  109. $( ‘#‘+file.id ).find(‘p.state‘).text(‘上传出错‘);
  110. });
  111. uploader.on( ‘uploadComplete‘, function( file ) {
  112. $( ‘#‘+file.id ).find(‘.progress‘).fadeOut();
  113. });
  114. function start(){
  115. uploader.upload();
  116. $(‘#btn‘).attr("onclick","stop()");
  117. $(‘#btn‘).text("取消上传");
  118. }
  119. function stop(){
  120. uploader.stop(true);
  121. $(‘#btn‘).attr("onclick","start()");
  122. $(‘#btn‘).text("继续上传");
  123. }
  124. </script>

2、servlet部分代码:

servlet部分需要两个servlet,一个用于接收分块文件,一个用于合并分块成一个文件:

1、接收分块servlet代码:

[java] view plain copy

  1. @SuppressWarnings("serial")
  2. public class UploadVideo extends HttpServlet {
  3. @Override
  4. protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  5. throws ServletException, IOException {
  6. // TODO Auto-generated method stub
  7. super.doGet(req, resp);
  8. doPost(req, resp);
  9. }
  10. @SuppressWarnings("unchecked")
  11. public void doPost(HttpServletRequest request, HttpServletResponse response)
  12. throws ServletException, IOException {
  13. DiskFileItemFactory factory = new DiskFileItemFactory();
  14. ServletFileUpload sfu = new ServletFileUpload(factory);
  15. sfu.setHeaderEncoding("utf-8");
  16. String savePath = this.getServletConfig().getServletContext()
  17. .getRealPath("");
  18. String folad = "uploads";
  19. savePath = savePath + "\\"+folad+"\\";
  20. String fileMd5 = null;
  21. String chunk = null;
  22. try {
  23. List<FileItem> items = sfu.parseRequest(request);
  24. for(FileItem item:items){
  25. if(item.isFormField()){
  26. String fieldName = item.getFieldName();
  27. if(fieldName.equals("fileMd5")){
  28. fileMd5 = item.getString("utf-8");
  29. }
  30. if(fieldName.equals("chunk")){
  31. chunk = item.getString("utf-8");
  32. }
  33. }else{
  34. File file = new File(savePath+"/"+fileMd5);
  35. if(!file.exists()){
  36. file.mkdir();
  37. }
  38. File chunkFile = new File(savePath+"/"+fileMd5+"/"+chunk);
  39. FileUtils.copyInputStreamToFile(item.getInputStream(), chunkFile);
  40. }
  41. }
  42. } catch (FileUploadException e) {
  43. // TODO Auto-generated catch block
  44. e.printStackTrace();
  45. }
  46. }
  47. }

2、合并分块servlet代码:

[java] view plain copy

  1. @SuppressWarnings("serial")
  2. public class Video extends HttpServlet {
  3. public void doGet(HttpServletRequest request, HttpServletResponse response)
  4. throws ServletException, IOException {
  5. super.doGet(request, response);
  6. doPost(request, response);
  7. }
  8. public void doPost(HttpServletRequest request, HttpServletResponse response)
  9. throws ServletException, IOException {
  10. String savePath = this.getServletConfig().getServletContext()
  11. .getRealPath("");
  12. String folad = "uploads";
  13. savePath = savePath + "\\"+folad+"\\";
  14. String action = request.getParameter("action");
  15. if(action.equals("mergeChunks")){
  16. //合并文件
  17. //需要合并的文件的目录标记
  18. String fileMd5 = request.getParameter("fileMd5");
  19. //读取目录里的所有文件
  20. File f = new File(savePath+"/"+fileMd5);
  21. File[] fileArray = f.listFiles(new FileFilter(){
  22. //排除目录只要文件
  23. @Override
  24. public boolean accept(File pathname) {
  25. // TODO Auto-generated method stub
  26. if(pathname.isDirectory()){
  27. return false;
  28. }
  29. return true;
  30. }
  31. });
  32. //转成集合,便于排序
  33. List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));
  34. Collections.sort(fileList,new Comparator<File>() {
  35. @Override
  36. public int compare(File o1, File o2) {
  37. // TODO Auto-generated method stub
  38. if(Integer.parseInt(o1.getName()) < Integer.parseInt(o2.getName())){
  39. return -1;
  40. }
  41. return 1;
  42. }
  43. });
  44. //UUID.randomUUID().toString()-->随机名
  45. File outputFile = new File(savePath+"/"+fileMd5+".mp4");
  46. //创建文件
  47. outputFile.createNewFile();
  48. //输出流
  49. FileChannel outChnnel = new FileOutputStream(outputFile).getChannel();
  50. //合并
  51. FileChannel inChannel;
  52. for(File file : fileList){
  53. inChannel = new FileInputStream(file).getChannel();
  54. inChannel.transferTo(0, inChannel.size(), outChnnel);
  55. inChannel.close();
  56. //删除分片
  57. file.delete();
  58. }
  59. outChnnel.close();
  60. //清除文件夹
  61. File tempFile = new File(savePath+"/"+fileMd5);
  62. if(tempFile.isDirectory() && tempFile.exists()){
  63. tempFile.delete();
  64. }
  65. System.out.println("合并成功");
  66. }else if(action.equals("checkChunk")){
  67. //检查当前分块是否上传成功
  68. String fileMd5 = request.getParameter("fileMd5");
  69. String chunk = request.getParameter("chunk");
  70. String chunkSize = request.getParameter("chunkSize");
  71. File checkFile = new File(savePath+"/"+fileMd5+"/"+chunk);
  72. response.setContentType("text/html;charset=utf-8");
  73. //检查文件是否存在,且大小是否一致
  74. if(checkFile.exists() && checkFile.length()==Integer.parseInt(chunkSize)){
  75. //上传过
  76. response.getWriter().write("{\"ifExist\":1}");
  77. }else{
  78. //没有上传过
  79. response.getWriter().write("{\"ifExist\":0}");
  80. }
  81. }
  82. }
  83. }

至此,大文件上传的分块和断点就ok了,这也只是我自己的项目需求编写的,这个框架还涵盖很多的内容和功能,需要你自己去研究了,不过都不是很难,你也可以去修改它的css和js文件根据自己的需求。

原文地址:https://www.cnblogs.com/yesu/p/8267131.html

时间: 2024-11-03 21:02:01

单文件WebUploader做大文件的分块和断点续传的相关文章

.net使用WebUploader做大文件的分块和断点续传

ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NET页面设计:TextBox和Button按钮. TextBox中需要自己受到输入文件夹的路径(包含文件夹),通过Button实现选择文件夹的问题还没有解决,暂时只能手动输入. 两种方法:生成rar和zip. 1.生成rar using Microsoft.Win32; using System.Di

webUploader实现大文件分片,断点续传

问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www.cnblogs.com/hackxiyu/p/8194066.html] 分析: 这篇文章参考了其它博主的文章,参考地址:[https://github.com/Fourwenwen/Breakpoint-http] 环境需要: 1.本地测试的话需要配置好Redis,用来保存文件的MD5校验值,和秒

.NetCore+WebUploader实现大文件分片上传

项目要求通过网站上传大文件,比如视频文件,通过摸索实现了文件分片来上传,然后后台进行合并. 使用了开源的前台上传插件WebUploader(http://fex.baidu.com/webuploader/) WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运

WebUploader 前端大文件上传

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中, 在bjui-all.js文件中的全局变量定义中有以下

java读取 500M 以上文件,java读取大文件

java 读取txt,java读取大文件 设置缓存大小BUFFER_SIZE ,Config.tempdatafile是文件地址 来源博客http://yijianfengvip.blog.163.com/blog/static/175273432201191354043148/ package com.yjf.util;import java.io.File;import java.io.RandomAccessFile;import java.nio.MappedByteBuffer;imp

mysql source导入多个sql文件和较大文件及在线互转

mysql>use dbtest; mysql>set names utf8; mysql>source D:/mysql/all.sql; 通过source命令导入多个文件,可以新建一个all.sql文件,里面存放下面的命令 例如: source d:/a1.sql; source d:/a2.sql; 当你运行 mysql>source D:/mysql/all.sql; 这样就可以在一个source命令里面导入多个sql文件了. 我看到还有人尝试用 source *.sql 

WebUploader 批量大文件上传下载

文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); this.root.put("f_id", ""); this.root.put("f_nameLoc", "根目录"); this.root.put("f_pid", ""); thi

删除目录下大量小文件和清空大文件

其中--delete-before    接收者在传输之前进行删除操作  可以用来清空目录或文件,如下:  1.先建立一个空目录  mkdir /data/blank  2.用rsync删除目标目录  rsync --delete-before -d /data/blank/ /var/spool/clientmqueue/  这样目标目录很快就被清空了 又假如你有一些特别大的文件要删除,比如nohup.out这样的实时更新的文件,动辄都是几十个G上百G的,也可 以用rsync来清空大文件,而且

.NET Core 如何上传文件及处理大文件上传

HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="up6.index" %> <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/