木头人的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
最代码最近下载分享源代码列表最近下载
djltzx LV27月17日
星星星星
hzzou325 LV17月8日
星星
jiarixin LV16月26日
星星
konner86 LV16月10日
星星
jerry_7039 LV46月9日
月亮
284220140 LV15月24日
星星
shao947652 LV15月11日
星星
OP-LHT LV35月4日
星星星星星星
1019193566 LV174月24日
太阳星星
huaua7676 LV204月24日
太阳月亮
最代码最近浏览分享源代码列表最近浏览
djltzx LV27月17日
星星星星
yilu201807137月13日
暂无贡献等级
lxj LV47月12日
月亮
hzzou325 LV17月8日
星星
136098150447月4日
暂无贡献等级
sangyy LV77月2日
月亮星星星星星星
逐梦211 LV27月2日
星星星星
hhewanning LV26月26日
星星星星
规范化 LV186月22日
太阳星星星星
Java_小强 LV46月15日
月亮
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友