php webuploader分片上传,JS - 文件上传组件WebUploader使用详解4（文件的断点续传）...

在之前的文章中，我介绍了如何通过 md5验证实现文件秒传(点击查看)以及大文件的分片上传(点击查看)，而将这二者结合起来便可实现文件的断点续传。其基本原理是：将文件进行分片，并且在每个分片上传之前先与服务器端进行校验(我们可以通过 md5验证，也可以直接通过分片的文件名来验证)，如果服务器已存在这个分片文件则跳过，否则才上传。

1，效果图

(1)这里我上传一个11M 的文件(开启分段上传，单片2M)，客户端这边在上传过半时将浏览器关闭。

(2)再次打开浏览器，选择同一个文件重新上传，可以看到由于之前分片在服务器上已经存在，进度很快跳到 71%然后继续上传其他分片。

2，样例代码

(1)客户端代码(index.html)

设置好“开启分片上传”、“每个分片的大小”这两个配置项。

通过 WebUploader提供的 hook在每个分片上传前发起验证请求，如果该分片已存在则跳过。

$(function() {

//开始上传按钮

var $btn = $('#ctlBtn');

//文件信息显示区域

var $list = $('#thelist');

//当前状态

var state = 'pending';

// WebUploader提供的钩子(hook)，在文件上传前先判断服务是否已存在这个分片文件

WebUploader.Uploader.register({

'before-send': 'beforeSend' //单个分片文件上传前

}, {

beforeSend: function( block ) {

var that = this;

var deferred = WebUploader.Deferred();

//上传前请求服务端,判断文件是否已经上传过

$.post("http://www.hangge.com/checkChunkExist.php",

{ fileName: block.file.name, chunk: block.chunk },

function(data){

if (data == '1') {

//如果存在则返回拒绝，表明该分块不需要上传

deferred.reject();

}

// 继续后面行为

deferred.resolve();

});

return deferred.promise();

}

});

//初始化Web Uploader

var uploader = WebUploader.create({

// swf文件路径

swf: 'webuploader/Uploader.swf',

// 文件接收服务端。

server: 'http://www.hangge.com/upload.php',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#picker',

// 开启分片上传。

chunked: true,

//每个分片的大小(这里设为4M)

chunkSize:2*1024*1024

});

// 当有文件被添加进队列的时候(选择文件后调用)

uploader.on( 'fileQueued', function( file ) {

$list.append( '

' +

'

' + file.name + '

' +

'

等待上传...

' +

'

' );

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id );

$li.find('p.state').text('上传中(' + parseInt(percentage * 100) + '%)');

});

// 文件上传成功后会调用

uploader.on( 'uploadSuccess', function( file ) {

$( '#'+file.id ).find('p.state').text('已上传');

});

// 文件上传失败后会调用

uploader.on( 'uploadError', function( file ) {

$( '#'+file.id ).find('p.state').text('上传出错');

});

// 文件上传完毕后会调用(不管成功还是失败)

uploader.on( 'uploadComplete', function( file ) {

$( '#'+file.id ).find('.progress').fadeOut();

});

// all事件(所有的事件触发都会响应到)

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();

} else {

uploader.upload();

}

});

});

#picker {

display: inline-block;

}

#ctlBtn {

position: relative;

display: inline-block;

cursor: pointer;

background: #EFEFEF;

padding: 10px 15px;

color: #2E2E2E;

text-align: center;

border-radius: 3px;

overflow: hidden;

}

#ctlBtn:hover {

background: #DDDDDD;

}

选择文件

开始上传

(2)服务端验证分片代码(checkChunkExist.php)

//获取需要验证文件名和分片索引

$fileName = $_POST["fileName"];

$chunk = $_POST["chunk"];

// 临时文件保存路径(分片)

$tmp = $_SERVER["DOCUMENT_ROOT"]."/uploadFiles/tmp";

//验证分片是否存在

if (file_exists($tmp."/".$fileName.".tmp".$chunk)){

echo "1";

} else {

echo "0";

}

?>

(3)服务端文件上传代码(upload.php)