分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 前端开发

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

发布时间：2023-09-06 01:35责任编辑：苏小强关键词：Web

前言：

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

2、servlet部分代码：


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

1、接收分块servlet代码：

[java]view plaincopy
  1. @SuppressWarnings("serial")
  2. publicclassUploadVideoextendsHttpServlet{
  3. @Override
  4. protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)
  5. throwsServletException,IOException{
  6. //TODOAuto-generatedmethodstub
  7. super.doGet(req,resp);
  8. doPost(req,resp);
  9. }
  10. @SuppressWarnings("unchecked")
  11. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
  12. throwsServletException,IOException{
  14. DiskFileItemFactoryfactory=newDiskFileItemFactory();
  15. ServletFileUploadsfu=newServletFileUpload(factory);
  16. sfu.setHeaderEncoding("utf-8");
  18. StringsavePath=this.getServletConfig().getServletContext()
  19. .getRealPath("");
  20. Stringfolad="uploads";
  21. savePath=savePath+"\\"+folad+"\\";
  23. StringfileMd5=null;
  24. Stringchunk=null;
  26. try{
  27. List<FileItem>items=sfu.parseRequest(request);
  29. for(FileItemitem:items){
  30. if(item.isFormField()){
  31. StringfieldName=item.getFieldName();
  32. if(fieldName.equals("fileMd5")){
  33. fileMd5=item.getString("utf-8");
  34. }
  35. if(fieldName.equals("chunk")){
  36. chunk=item.getString("utf-8");
  37. }
  38. }else{
  39. Filefile=newFile(savePath+"/"+fileMd5);
  40. if(!file.exists()){
  41. file.mkdir();
  42. }
  43. FilechunkFile=newFile(savePath+"/"+fileMd5+"/"+chunk);
  44. FileUtils.copyInputStreamToFile(item.getInputStream(),chunkFile);
  46. }
  47. }
  49. }catch(FileUploadExceptione){
  50. //TODOAuto-generatedcatchblock
  51. e.printStackTrace();
  52. }
  54. }
  55. }

2、合并分块servlet代码：

[java]view plaincopy
  1. @SuppressWarnings("serial")
  2. publicclassVideoextendsHttpServlet{
  4. publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
  5. throwsServletException,IOException{
  6. super.doGet(request,response);
  7. doPost(request,response);
  9. }
  11. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
  12. throwsServletException,IOException{
  13. StringsavePath=this.getServletConfig().getServletContext()
  14. .getRealPath("");
  15. Stringfolad="uploads";
  16. savePath=savePath+"\\"+folad+"\\";
  18. Stringaction=request.getParameter("action");
  20. if(action.equals("mergeChunks")){
  21. //合并文件
  22. //需要合并的文件的目录标记
  23. StringfileMd5=request.getParameter("fileMd5");
  25. //读取目录里的所有文件
  26. Filef=newFile(savePath+"/"+fileMd5);
  27. File[]fileArray=f.listFiles(newFileFilter(){
  28. //排除目录只要文件
  29. @Override
  30. publicbooleanaccept(Filepathname){
  31. //TODOAuto-generatedmethodstub
  32. if(pathname.isDirectory()){
  33. returnfalse;
  34. }
  35. returntrue;
  36. }
  37. });
  39. //转成集合，便于排序
  40. List<File>fileList=newArrayList<File>(Arrays.asList(fileArray));
  41. Collections.sort(fileList,newComparator<File>(){
  42. &nb

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved