木头人的gravatar头像
木头人2018-01-12 21:01:10

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(前端一些优化和遇到的问题总结)


打赏

已有1人打赏

最代码官方的gravatar头像

文件名:webuploader.zip,文件大小:598.521K下载
  • /
      • /webuploader
        • /webuploader/.classpath
        • /webuploader/.project
          • /webuploader/.settings
            • /webuploader/.settings/.jsdtscope
            • /webuploader/.settings/org.eclipse.jdt.core.prefs
            • /webuploader/.settings/org.eclipse.wst.common.component
            • /webuploader/.settings/org.eclipse.wst.common.project.facet.core.xml
            • /webuploader/.settings/org.eclipse.wst.jsdt.ui.superType.container
            • /webuploader/.settings/org.eclipse.wst.jsdt.ui.superType.name
最代码最近下载分享源代码列表最近下载
乞丐哥哥1月19日
暂无贡献等级
xuge1911月18日
暂无贡献等级
fenghuijun1月17日
暂无贡献等级
hugege1月16日
最代码贡献等级说明
dwq0001月16日
暂无贡献等级
Hmz31921月13日
最代码贡献等级说明
wyx0657471月13日
最代码贡献等级说明
最代码官方 LV41月13日
最代码贡献等级说明
最代码最近浏览分享源代码列表最近浏览
hyLiLi昨天
最代码贡献等级说明
qustdjx1月21日
暂无贡献等级
sgf1111111月19日
暂无贡献等级
10544038331月19日
暂无贡献等级
乞丐哥哥1月19日
暂无贡献等级
xuge1911月18日
暂无贡献等级
mahw98601月17日
最代码贡献等级说明
5922017971月17日
最代码贡献等级说明
hejing1月17日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友