webuploader+bootstrap实现文件断点分片并发上传实例2(前端一些优化和遇到的问题总结)

这个版本使用了bootstrap对页面进行了修改，对上次遇到的问题进行总结。

文件对象：包含文件的信息(文件名，文件大小等)

webuploader可以指定上传哪一个文件，但是不能同时上传多个文件(这里说的是，多个文件必须是按队列的顺序上传)，看了一下pupload也是做多文件分片的上传插件，原理都差不多，大家也可以看一下。

前台页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webuploader上传</title>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="webuploader/bootstrap.css">
<script type="text/javascript" src="webuploader/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="webuploader/webuploader.js"></script>
<script type="text/javascript" src="webuploader/hashmap.js"></script>
<style type="text/css">
#picker {
    display: inline-block;
    line-height: 1.428571429;
    vertical-align: middle;
    margin: 0 12px 0 0;
}
</style>
</head>
<body>
	<div id="uploader" class="container">
		<!--用来存放文件信息-->
		<div id="thelist" class="row">
			<div class="panel panel-primary">
  				<div class="panel-heading">webuploader文件上传</div>
  				<table class="table table-striped table-bordered" id="uploadTable">
  					<thead>
  						<tr>
  							<th>序号</th>
  							<th>文件名称</th>
  							<th>文件大小</th>
  							<th>上传状态</th>
  							<th>上传进度</th>
  							<th>操作</th>
  						</tr>
  					</thead>
  					<tbody></tbody>
  				</table>
  				<div class="panel-footer">
  					<div id="picker">选择文件</div>
					<button id="btn" class="btn btn-default">开始上传</button>
  				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var fileMd5;
		var fileSuffix;
		var $list=$("#thelist table>tbody");
		var state = 'pending';//初始按钮状态
		var $btn=$("#btn");
		var count=0;
		var map=new HashMap();
		//监听分块上传过程中的三个时间点  
		WebUploader.Uploader.register({
			"before-send-file" : "beforeSendFile",
			"before-send" : "beforeSend",
			"after-send-file" : "afterSendFile",
		}, {
			//时间点1：所有分块进行上传之前调用此函数  
			beforeSendFile : function(file) {
				var deferred = WebUploader.Deferred();
				//1、计算文件的唯一标记，用于断点续传  
				(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
						.progress(function(percentage) {
							$('#' + file.id).find("td.state").text("正在读取文件信息...");
						}).then(function(val) {
							fileMd5 = val;
							$('#' + file.id).find("td.state").text("成功获取文件信息...");
							//获取文件信息后进入下一步  
							deferred.resolve();
						});
				return deferred.promise();
			},
			//时间点2：如果有分块上传，则每个分块上传之前调用此函数  
			beforeSend : function(block) {
				var deferred = WebUploader.Deferred();

				$.ajax({
					type : "POST",
					url : "video?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() {
				//如果分块上传成功，则通知后台合并分块  
				$.ajax({
					type : "POST",
					url : "video?action=mergeChunks",
					data : {
						fileMd5 : fileMd5,
						fileSuffix:fileSuffix,
					},
					success : function(response) {
						alert("上传成功");
					}
				});
			}
		});

		var uploader = WebUploader
				.create({
					// swf文件路径  
					swf : 'webuploader/Uploader.swf',
					// 文件接收服务端。  
					server : 'upload',
					// 选择文件的按钮。可选。  
					// 内部根据当前运行是创建，可能是input元素，也可能是flash.  
					pick : {
						id : '#picker',//这个id是你要点击上传文件的id
						multiple : true
					},
					// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！  
					resize : true,
					auto : false,
					//开启分片上传  
					chunked : true,
					chunkSize : 10 * 1024 * 1024,

					accept : {
						extensions : "txt,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx,iso",
						mimeTypes : '.txt,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.iso'
					}
				});

		// 当有文件被添加进队列的时候  
		uploader.on('fileQueued', function(file) {
			//保存文件扩展名
			fileSuffix=file.ext;
			var fileSize=file.size;
			var fileSizeStr="";
			/* if(fileSize/1024<1024){
				fileSize=fileSize/1024;
				fileSizeStr=fileSize.toFixed(2)+"KB";
			}else if(fileSize/1024/1024<1024){
				fileSize=fileSize/1024/1024;
				fileSizeStr=fileSize.toFixed(2)+"MB";
			}else if(fileSize/1024/1024/1024<1024){
				fileSize=fileSize/1024/1024/1024;
				fileSizeStr=fileSize.toFixed(2)+"GB";
			}else{
				fileSize=fileSize/1024/1024/1024/1024;
				fileSizeStr=fileSize.toFixed(2)+"T";
			} */
			fileSizeStr=WebUploader.Base.formatSize(fileSize);
			count++;
			$list.append(
					'<tr id="' + file.id + '" class="item" flag=0>'+
					'<td class="index">' + count + '</td>'+
					'<td class="info">' + file.name + '</td>'+
					'<td class="size">' + fileSizeStr + '</td>'+
					'<td class="state">等待上传...</td>'+
					'<td class="percentage"></td>'+
					'<td class="operate"><button name="upload" class="btn btn-warning">开始</button><button name="delete" class="btn btn-error">删除</button></td></tr>');
			map.put(file.id+"",file);
		});

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

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

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

		uploader.on('uploadComplete', function(file) {
			uploader.removeFile(file);
		});
		
		
		uploader.on('all', function(type) {
			if (type === 'startUpload') {
				state = 'uploading';
			} else if (type === 'stopUpload') {
				state = 'paused';
			} else if (type === 'uploadFinished') {
				state = 'done';
			}

			if (state === 'uploading') {
				$btn.text('暂停上传');
			} else {
				$btn.text('开始上传');
			}
		});
		
		$btn.on('click', function(){  
	        if (state === 'uploading'){  
	            uploader.stop(true);  
	        } else {  
	        	uploader.upload();
	        }
		});
		
		$("body").on("click","#uploadTable button[name='upload']",function(){
			flag=$(this).parents("tr.item").attr("flag")^1;
			$(this).parents("tr.item").attr("flag",flag);
			var id=$(this).parents("tr.item").attr("id");
			if(flag==1){
				$(this).text("暂停");
				uploader.upload(uploader.getFile(id,true));
				
			}else{
				$(this).text("开始");
				//uploader.stop(true);
				uploader.stop(uploader.getFile(id,true));
				//uploader.skipFile(file);
				//uploader.removeFile(file);
				//uploader.getFile(id,true);
			}
		});
		
		$("body").on("click","#uploadTable button[name='delete']",function(){
			var id=$(this).parents("tr.item").attr("id");
			$(this).parents("tr.item").remove();
			uploader.removeFile(uploader.getFile(id,true));
			map.remove(id);
		});
	</script>
</body>
</html>

页面效果：

webuploader+bootstrap实现文件断点分片并发上传实例2(前端一些优化和遇到的问题总结)

猜你喜欢

/webuploader/src/com/cn/upload/UploadVideo.java

/webuploader/src/com/cn/upload/Video.java