木头人的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
最代码最近下载分享源代码列表最近下载
thresh17 LV1前天
星星
cgnnzg LV29月15日
星星星星
ningxiaodong LV29月10日
星星星星
唐钰小宝A LV118月13日
月亮月亮星星星星星星
free sadn LV117月31日
月亮月亮星星星星星星
hehehe998 LV87月22日
月亮月亮
djltzx LV37月17日
星星星星星星
hzzou325 LV17月8日
星星
jiarixin LV16月26日
星星
konner86 LV16月10日
星星
最代码最近浏览分享源代码列表最近浏览
thresh17 LV1前天
星星
fanliansuo LV249月24日
太阳月亮月亮
cgnnzg LV29月15日
星星星星
喜欢小让9月13日
暂无贡献等级
244938744 LV19月10日
星星
ningxiaodong LV29月10日
星星星星
luul123 LV139月6日
月亮月亮月亮星星
mhy123456 LV78月22日
月亮星星星星星星
唐钰小宝A LV118月13日
月亮月亮星星星星星星
a987013741 LV58月9日
月亮星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友