xuqiang
/
webuploader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8" />
	<title>upload file</title>
	<link type="text/css" href="./bootstrap.min.css" rel="stylesheet" />
	<link type="text/css" href="./webuploader.css" rel="stylesheet" />
</head>
<body >

	<div id="uploader" class="wu-example" >
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list" style="width:500px;"></div>
		<div class="btns">
			<div id="picker">选择文件</div>
		</div>
	</div>
	<div id="list">
	</div>

<script src="./jquery-3.1.1.min.js"></script>
<script src="./md5.js"></script>
<script src="./webuploader.html5only.min.js"></script>
<script type="text/javascript">

	var md5File; 
	//监听分块上传过程中的时间点  
	WebUploader.Uploader.register({  
	    "before-send-file":"beforeSendFile",  // 整个文件上传前
	    "before-send":"beforeSend",  // 每个分片上传前
	    "after-send-file": "afterSendFile"  // 分片上传完毕
	},{
	    //时间点1：所有分块进行上传之前调用此函数 ，检查文件存不存在
	    beforeSendFile:function(file){  
	    	var deferred = WebUploader.Deferred();
	    	md5File = hex_md5(file.name+file.size);//根据文件名称，大小确定文件唯一标记，这种方式不赞成使用
	    	$.ajax({  
	            type:"POST",  
	            url:"/bigfile/check",
	            data:{  
	                md5File: md5File, //文件唯一标记   
	            },  
	            async: false,  // 同步
	            dataType:"json",  
	            success:function(response){  
	                if(response.resultCode == 1){  //文件存在，跳过 ，提示文件存在
						$('#' + file.id).find('p.state').text("file exist");
						$("#picker").show();
	                }else{  
	                    deferred.resolve();  //文件不存在或不完整，发送该文件
	                }
	            }  
	        } , function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
	        	deferred.resolve();
	        } );  
	        return deferred.promise(); 
	    },  
	    //时间点2：如果有分块上传，则每个分块上传之前调用此函数  ，判断分块存不存在
	    beforeSend:function(block){  
	        var deferred = WebUploader.Deferred();  
	        $.ajax({  
	            type:"POST",  
	            url:"/bigfile/checkChunk",
	            data:{  
	                md5File: md5File,  //文件唯一标记 
	                chunk:block.chunk,  //当前分块下标  
	            },  
	            dataType:"json",  
	            success:function(response){  
	                if(response.resultCode == 1){
	                    deferred.reject(); //分片存在，跳过 
	                }else{  
	                    deferred.resolve();  //分块不存在或不完整，重新发送该分块内容  
	                }  
	            }  
	        }, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
	        	deferred.resolve();
	        });  
	        return deferred.promise();  
	    },
	    //时间点3：分片上传完成后，通知后台合成分片
	    afterSendFile: function (file) {        
	        var chunksTotal = Math.ceil(file.size / (5*1024*1024));
	        if (chunksTotal >= 1) {
	            //合并请求
	            var deferred = WebUploader.Deferred();  
	            $.ajax({
	                type: "POST",
	                url: "/bigfile/merge",
	                data: {
	                	name: file.name,
	                	md5File: md5File,
	                    chunks: chunksTotal
	                },
	                cache: false,
	                async: false,  // 同步
	                dataType: "json",  
		            success:function(response){  
		                if(response.resultCode == 1){
		                	$('#' + file.id).find('p.state').text('upload success');
		                	$('#' + file.id).find('.progress').fadeOut();
		                }else{  
		                	$('#' + file.id).find('p.state').text('merge error');
			            	deferred.reject();
		                }
						$("#picker").show();
						fileList();
		            }  
	            })
	            return deferred.promise(); 
	        }
	    } 
	}); 

	var uploader = WebUploader.create({
		auto: true,// 选完文件后，是否自动上传。
	    swf: '../static/Uploader.swf',// swf文件路径
	    server: '/bigfile/upload',// 文件接收服务端。
	    pick: '#picker',// 选择文件的按钮。可选。
	    chunked:true,//开启分片上传
	    chunkSize:5*1024*1024,//5M
	    chunkRetry: 3,//错误重试次数
		prepareNextFile: true// 允许在文件传输时提前把下一个文件准备好
	});
	
	//上传添加参数
	uploader.on('uploadBeforeSend', function (obj, data, headers) {
		 data.md5File=md5File;
     }); 
	
	// 当有文件被添加进队列的时候
	uploader.on( 'fileQueued', function( file ) {
		$("#picker").hide();//隐藏上传框
		$("#thelist").append( '<div id="' + file.id + '" class="item">' +
	        '<h4 class="info">' + file.name + '</h4>' +
	        '<p class="state"></p>' +
	    '</div>' );
	});

	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress .progress-bar');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<div class="progress progress-striped active">' +
	          '<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
	        '</div>').appendTo( $li ).find('.progress-bar');
	    }
	    $li.find('p.state').text('Uploading');
	    $percent.css( 'width', percentage * 100 + '%' );
	});

	fileList();

	function fileList() {
		$.ajax({
			type: "get",
			url: '/bigfile/getFiles',
			dataType: "json",
			success: function (data) {
				var listContent = "";
				$.each(data.mergeFiles, function (index, val) {
							if (val != null) {
								listContent += '<li><a href="/bigfile/down?path=' + val + '">' + val + '</a></li>';
							}
							$('#list').html(listContent);
						}
				);
				$.each(data.localFiles, function (index, val) {
							if (val != null) {
								listContent += '<li><a href="/bigfile/down?path=' + val + '">' + val + '</a></li>';
							}
							$('#list').html(listContent);
						}
				);
			},
			error: function (data) {
				console.log(data);
			}
		});
	}
	
</script>
</body>
</html>