百度Web Uploader组件实现文件上传之分片上传(一)

最新推荐文章于 2023-06-21 16:20:31 发布
最新推荐文章于 2023-06-21 16:20:31 发布
阅读量268 收藏 1
点赞数
分类专栏： webupload 文章标签： servlet 文件上传 分片上传 Web Uploader
[color=red][size=large]
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。多的不说了直接怼代码[/size][/color]

[size=large]前端是三个监听：一个是获取md5，一个是分片，最后一个是合并代码[/size] 
<!DOCTYPE html>
<html ng-app="uploadApp" ng-controller="uploadCtl">
<head>
<title>fileupload.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../themes/reset.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/webuploader.css" type="text/css"></link>
<script type="text/javascript" src="../plugins/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../plugins/webuploader.min.js"></script>
<script type="text/javascript">  
$(function(){
var fileName;
var fileMd5;  
        //监听分块上传过程中的三个时间点  
        WebUploader.Uploader.register({  
            "before-send-file":"beforeSendFile",  
            "before-send":"beforeSend",  
            "after-send-file":"afterSendFile",  
        },{  
            //时间点1：所有分块进行上传之前调用此函数  
            beforeSendFile:function(file){  
            	fileName=file.name;
                var deferred = WebUploader.Deferred();  
                //1、使用md5计算文件的唯一标记，用于断点续传  
                (new WebUploader.Uploader()).md5File(file,0,10*1024*1024)  
                    .progress(function(percentage){  
                        $('#item1').find("p.state").text("正在读取文件信息...");  
                    })  
                    .then(function(val){  
                        fileMd5=val;  
                        $('#item1').find("p.state").text("成功获取文件信息...");  
                        //获取文件信息后进入下一步  
                        deferred.resolve();  
                    });  
                    //调用deferred.resolve();无效 
                return deferred.promise();  
            },  
            //时间点2：如果有分块上传，则每个分块上传之前调用此函数  
            beforeSend:function(block,file){  
            console.log("分块"+fileName.replace(/.+\./, ""));
                var deferred = WebUploader.Deferred();  

                $.ajax({  
                    type:"POST",  
                    url:"/servlet/mergeFile?action=checkChunk",  
                    data:{  
                        //文件唯一标记  
                        fileMd5:fileMd5,  
                        //当前分块下标  
                        chunk:block.chunk,  
                        //当前分块大小  
                        chunkSize:block.end-block.start  
                    },  
                    dataType:"json",  
                    success:function(response){  
                        if(response.ifExist){  
                            //分块存在，跳过  
                            deferred.reject();  
                        }else{  
                            //分块不存在或不完整，重新发送该分块内容  
                            deferred.resolve();  
                        }  
                    }  
                });  

                this.owner.options.formData.fileMd5 = fileMd5;  
                deferred.resolve();  
                return deferred.promise();  
            },  
            //时间点3：所有分块上传成功后调用此函数  
            afterSendFile:function(){ 
            	console.log("合并") ;
                //如果分块上传成功，则通知后台合并分块  
                $.ajax({  
                    type:"POST",  
                    url:"/servlet/mergeFile?action=mergeChunks",  
                    data:{  
                        fileMd5:fileMd5,  
                    },  
                    success:function(response){  
                        alert("上传成功");  
                        var path = "uploads/"+fileMd5+".mp4";  
                        $("#item1").attr("src",path);  
                    }  
                });  
            }  
        });  

        var uploader = WebUploader.create({  
            // swf文件路径  
            swf: '<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf',  
            // 文件接收服务端。  
            server: '/servlet/FileUpLoad',  
            // 选择文件的按钮。可选。  
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
            pick: {id: '#picker',   
            //这个id是你要点击上传文件的id，自己设置就好</span>  
            multiple:true},  
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！  
            resize: true,  
            auto:true,  
            //上传并发数
            threads:5,
            //开启分片上传  
            chunked: true,  
            chunkSize:10*1024*1024,  

            /* accept: {  
            //限制上传文件为MP4  
                extensions: 'mp4',  
                mimeTypes: 'video/mp4',  
            }   */
        });  

        // 当有文件被添加进队列的时候  
        uploader.on( 'fileQueued', function( file ) {  

            $('#item1').empty();  
            $('#item1').html('<div id="' + file.id + '" class="item">'+  
                '<a class="upbtn" id="btn" onclick="stop()">[取消上传]</a>'+  
                '' +  
                '<p class="state">等待上传...</div>'  
            );  
        });  

        // 文件上传过程中创建进度条实时显示。  
        uploader.on( 'uploadProgress', function( file, percentage ) {  
            $('#item1').find('p.state').text(file.name+'上传中 '+Math.round(percentage * 100) + '%');  
        });  

        uploader.on( 'uploadSuccess', function( file ) {  
            $( '#'+file.id ).find('p.state').text('已上传');  
        });  

        uploader.on( 'uploadError', function( file ) {  
            $( '#'+file.id ).find('p.state').text('上传出错');  
        });  

        uploader.on( 'uploadComplete', function( file ) {  
            $( '#'+file.id ).find('.progress').fadeOut();  
        });  

        function start(){  
            uploader.upload();  
            $('#btn').attr("onclick","stop()");  
            $('#btn').text("取消上传");  
        }  

        function stop(){  
            uploader.stop(true);  
            $('#btn').attr("onclick","start()");  
            $('#btn').text("继续上传");  
        }  

});


    </script>  
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
<div id="item1"></div>
</body>
</html>


后端：一个保持文件servlet，一个判断分片和合并文件servelt
[size=x-large]
保持文件servlet[/size] 

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.ws.rs.Path;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@Path("/fileupload")
public class ZFileCommand extends HttpServlet{
	private static final long serialVersionUID = -2720014423604662780L;
		// 1.文件上传路径
		private static final String UPLOAD_DIRECTORY = "D:/文件上传";
		// 2.设置临时存储文件大小，当超过大小时，将先存储超出大小文件在临时目录
		private static final int MEMORY_THRESHOLD = 1024 * 1024 * 30; 
		// 3.设置最大文件上传值
		private static final int MAX_FILE_SIZE = 1024 * 1024 * 2000; 
		// 4.最大请求值
		private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 2048; 

	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			//获取文件名
		    String filename=request.getParameter("name");
		    //防止读取name名乱码
		    filename=new String(filename.getBytes("iso-8859-1"),"utf-8");
		    //在控制台打印文件名
		    System.out.println("文件名："+filename);
		     //设置文件MIME类型  
		    response.setContentType(getServletContext().getMimeType(filename));  
		    //设置Content-Disposition  
		    String realName = filename.substring(filename.indexOf("_")+1);
		    response.setHeader("Content-Disposition", "attachment;filename="+realName);

		    //输入流为项目文件，输出流指向浏览器
		    InputStream is=new FileInputStream(UPLOAD_DIRECTORY+filename);
		    ServletOutputStream os =response.getOutputStream();
		    /*
		     * 设置缓冲区
		     * is.read(b)当文件读完时返回-1
		     */
		    int len=-1;
		    byte[] b=new byte[1024];
		    while((len=is.read(b))!=-1){
		        os.write(b,0,len);
		    }
		    //关闭流
		    is.close();
		    os.close();

		}

	/**
	 * @摘要 提供文件上传的方法
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		//1.设置字符编码为utf-8
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		// 2.检测是否为多媒体上传
		if (!ServletFileUpload.isMultipartContent(request)) {
			// 2.1如果不是则停止
			PrintWriter writer = response.getWriter();
			writer.println("Error: 表单必须包含 enctype=multipart/form-data");
			writer.flush();
			return  ;
		}
		// 3.配置上传参数
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//4. 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
		factory.setSizeThreshold(MEMORY_THRESHOLD);
		// 5.设置临时存储目录 java.io.tmpdir默认的临时文件路径为服务器的temp目录
		factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

		ServletFileUpload upload = new ServletFileUpload(factory);

		// 6.设置最大文件上传值
		upload.setFileSizeMax(MAX_FILE_SIZE);

		// 7.设置最大请求值 (包含文件和表单数据)
		upload.setSizeMax(MAX_REQUEST_SIZE);

		//8. 如果目录不存在则创建
		File uploadDir = new File(UPLOAD_DIRECTORY);
		if (!uploadDir.exists()) {
			uploadDir.mkdir();
		}
		String fileMd5 = null;  
        String chunk = null;  
		try {
			// 10.解析请求的内容提取文件数据
			List<FileItem> formItems = upload.parseRequest(request);
				// 10.1迭代表单数据
			if (formItems != null && formItems.size() > 0) {
				for (FileItem item : formItems) {
					if (item.isFormField()) {
						  String fieldName = item.getFieldName();  
		                    if(fieldName.equals("fileMd5")){  
		                        fileMd5 = item.getString("utf-8");  
		                    }  
		                    if(fieldName.equals("chunk")){  
		                        chunk = item.getString("utf-8");  
		                    }  

	                }else{
	                	String nFileName = new File(item.getName()).getName();

	                	File file = new File(UPLOAD_DIRECTORY+"/"+fileMd5);  

	                    if(!file.exists()){  
	                        file.mkdir();  
	                    }  
						nFileName=nFileName.substring(0,nFileName.lastIndexOf("."))	;

						item.write(new File(UPLOAD_DIRECTORY+"/"+fileMd5+"/"+chunk));

						item.delete();					    	
	                }

					}
				}  
		} catch (Exception ex) {
			PrintWriter writer=response.getWriter();
			writer.print("error");
		}
	}
}


[size=large]一个判断分片和合并文件servelt[/size] 
import java.io.File;
import java.io.FileFilter;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class mergeFile extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static final String UPLOAD_DIRECTORY = "D:/文件上传";

	   public void doGet(HttpServletRequest request, HttpServletResponse response)  
	            throws ServletException, IOException {  
	        super.doGet(request, response);  
	        doPost(request, response);  

	    }  

	    public void doPost(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  
	        String savePath = this.getServletConfig().getServletContext()  
	                .getRealPath("");  
	        String folad = "uploads";  
	        savePath = "D:/文件上传";  

	        String action = request.getParameter("action");  

	        if(action.equals("mergeChunks")){  
	            //合并文件  
	            //需要合并的文件的目录标记  
	            String fileMd5 = request.getParameter("fileMd5");  

	            //读取目录里的所有文件  
	            File f = new File(savePath+"/"+fileMd5);  
	            File[] fileArray = f.listFiles(new FileFilter(){  
	                //排除目录只要文件  
	                public boolean accept(File pathname) {  
	                    // TODO Auto-generated method stub  
	                    if(pathname.isDirectory()){  
	                        return false;  
	                    }  
	                    return true;  
	                }  
	            });  

	            //转成集合，便于排序  
	            List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));  
	            Collections.sort(fileList,new Comparator<File>() {  
	                public int compare(File o1, File o2) {  
	                    // TODO Auto-generated method stub  
	                    if(Integer.parseInt(o1.getName()) < Integer.parseInt(o2.getName())){  
	                        return -1;  
	                    }  
	                    return 1;  
	                }  
	            });  
	            //UUID.randomUUID().toString()-->随机名  
	            File outputFile = new File(savePath+"/"+fileMd5+".mp4");  
	            //创建文件  
	            outputFile.createNewFile();  
	            //输出流  
	            FileChannel outChnnel = new FileOutputStream(outputFile).getChannel();  
	            //合并  
	            FileChannel inChannel;  
	            for(File file : fileList){  
	                inChannel = new FileInputStream(file).getChannel();  
	                inChannel.transferTo(0, inChannel.size(), outChnnel);  
	                inChannel.close();  
	                //删除分片  
	                file.delete();  
	            }  
	            outChnnel.close();  
	            //清除文件夹  
	            File tempFile = new File(savePath+"/"+fileMd5);  
	            if(tempFile.isDirectory() && tempFile.exists()){  
	                tempFile.delete();  
	            }  
	            System.out.println("合并成功");  
	        }else if(action.equals("checkChunk")){  
	            //检查当前分块是否上传成功  
	            String fileMd5 = request.getParameter("fileMd5");  
	            //分块次数
	            String chunk = request.getParameter("chunk");
	            //分块大小
	            String chunkSize = request.getParameter("chunkSize");  

	            File checkFile = new File(savePath+"/"+fileMd5+"/"+chunk);  

	            response.setContentType("text/html;charset=utf-8");  
	            //检查文件是否存在，且大小是否一致  
	            if(checkFile.exists() && checkFile.length()==Integer.parseInt(chunkSize)){  
	                //上传过  
	                response.getWriter().write("{\"ifExist\":1}");  
	            }else{  
	                //没有上传过  
	                response.getWriter().write("{\"ifExist\":0}");  
	            }  
	        }  

	    }

[size=x-large]附件：源码[/size]
柳絮飞祭奠
关注
专栏目录
一个简单的WebUploader多文件上传组件
08-10
一个简单的WebUploader多文件上传组件
百度 WebUploader 分片上传
weixin_45525177的博客
05-29 267
最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进
百度 WebUploader 分块上传
最新发布
Mr_Zang666的博客
06-21 106
4. 上传文件不能使用 request.getParameter("")获取参数了，而是直接将request解析，通过判断每一项是文件还是非文件，然后进行相应的操作（文件的话就是用流来读取，非文件的话，暂时保存到一个map中。, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名。this.ui.msg.text("MD5计算完毕，开始连接服务器...");this.ui.msg.text("服务器存在相同文件，快速上传成功。
php结合web uploader插件实现分片上传文件
12-18
在本文中，我们将探讨如何利用PHP与Web Uploader插件实现大文件的分片上传功能。Web Uploader是一款强大的JavaScript文件上传组件，尤其适合处理大文件上传和断点续传等高级需求。以下是对实现这一功能的详细步骤的...
chunk-uploader:SpringBoot+Redis 实现大文件分片上传，断点续传，急速秒传。前端使用vue-simpler-uploader实现文件并发上传
05-27
接着，我们引入Redis作为临时存储，实现文件分片上传。文件被分割成多个小块（chunk），每个chunk在上传时被暂时存储在Redis中。这样做的好处在于，Redis是内存数据库，读写速度极快，适合处理大量的小文件操作。每...
Web Uploader文件上传插件使用详解
09-02
1. **分片并发上传**：Web Uploader将大文件分割成多个小分片并行上传，一旦某个分片上传失败，只需重新上传出错的分片，无需重新上传整个文件。这显著提升了上传速度，并且能实时跟踪上传进度。 2. **预览与压缩**...
百度Web Uploader组件实现文件上传(一)
10-27 192
[size=large]Web Uploader WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片...
百度Webuploader 大文件分片上传（.net接收）
12-27
解决百度上传控件Webuploader超过4M大文件上传不成功的问题，之前我也通过CSDN下载了几个例子，小于4M的文件和图片都没问题，大大于4M的文件就有问题了，是因为没有分段接收的文件包及没有配置分段处理的方法。这个是网上搜索的.net版本的，分享给大家，亲测试没问题。参考：http://www.cnblogs.com/hijimi/p/4988027.html
百度多文件上传插件完美Demo-支持分片上传、续点上传、多文件进度条单独显示。
05-31
支持H5/Flash等，用户可以自定义配置，也可以选择优先级支持，支持IE6等。
百度图片上传插件
06-17
支持单、多文件上传，支持即时预览，支持删除
百度WebUploader大文件分片上传/多线程上传
Mr_Zang666的博客
06-08 312
对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传，从上传的效率来看，利用多线程并发上传能够达到最大效率。本文是基于 springboot + vue 实现的文件上传，本文主要介绍服务端实现文件上传的步骤及代码实现，vue的实现步骤及实现请移步本人的另一篇文章。
大文件分片上传-百度webuploader
qq_20741133的博客
06-20 911
大文件分片上传，文件秒传，百度webuploader
百度WebUploader实现浏览器端大文件分块上传
weixin_45525177的博客
06-19 167
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows，因此打算使用nodejs来解决这一问题 发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编辑器中添加word文档功能也只是自己用，因此可以忽略这种浏览器了 找了很久，试用了很多编辑器，发现
百度WebUploader 大文件分片上传处理
weixin_45525177的博客
07-31 215
java两台服务器之间，大文件上传（续传），采用了Socket通信机制以及JavaIO流两个技术点，具体思路如下： 实现思路： 1、服：利用ServerSocket搭建服务器，开启相应端口，进行长连接操作 2、服：使用ServerSocket.accept()方法进行阻塞，接收客户端请求 3、服：每接收到一个Socket就建立一个新的线程来处理它 4、客：利用Socket进行远程连接，询问已上传进度 5、客：使用FileInputStream.skip(long length)从指定位置读.
java list断点续传_java使用WebUploader做大文件的分块和断点续传
weixin_42306503的博客
02-16 106
前言：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。上面的一段话是来自http://fex.baidu.com/w...
FineUploader：全浏览器文件上传组件详解
这个组件利用AJAX技术实现文件上传，确保在不同浏览器环境下提供一致的用户体验。FineUploader的一大亮点是它的文件拖放功能，允许用户直接从桌面拖拽文件到浏览器进行上传，但这项功能可能需要特定版本的浏览器支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值