如今，网络技术的发展，使得大文件的传输更加方便快捷，但是大文件的上传还是有很多的困难。为了解决这个问题，人们提出了基于PHP+WebUploader的大文件分片上传技术，可以让大文件的上传更加容易，并且支持断点续传和进度条。下面就介绍一下具体的使用方法：

1. 准备工作

你需要准备一个PHP环境，并且安装WebUploader插件，它可以帮助我们实现大文件的分片上传。

2. 编写HTML代码

我们需要编写HTML代码，用来实现上传文件的界面，这里需要使用WebUploader插件提供的API，例如：

<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择文件</div>
</div>

其中，#fileList用来存放文件列表，#filePicker用来选择文件。

3. 编写JS代码

我们需要编写JS代码，用来实现上传文件的操作，这里需要使用WebUploader插件提供的API，例如：

// 初始化Web Uploader
var uploader = WebUploader.create({

// 选完文件后，是否自动上传。
auto: true,

// swf文件路径
swf: '/js/Uploader.swf',

// 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php',

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',

// 分片上传设置
chunked: true,
chunkSize: 5 * 1024 * 1024,
chunkRetry: 3,
threads: 3,

// 只允许选择图片文件。
accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
    }
});

其中，chunked设置为true，表示分片上传；chunkSize设置为5M，表示每个分片的大小；chunkRetry设置为3，表示分片上传失败后重试次数；threads设置为3，表示同时上传的分片数量。

4. 监听事件

我们需要监听事件，用来实现断点续传和进度条，这里需要使用WebUploader插件提供的API，例如：

// 文件上传过程中创建进度条实时显示。
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" >' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }

    $li.find('p.state').text('上传中');

    $percent.css( 'width', percentage * 100 + '%' );
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).addClass('upload-state-done');
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');

    // 避免重复创建
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }

    $error.text('上传失败');
});

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});

其中，uploadProgress用来实现文件上传过程中创建进度条实时显示；uploadSuccess用来实现文件上传成功；uploadError用来实现文件上传失败；uploadComplete用来实现完成上传完了，

本文链接：http://task.lmcjl.com/news/7209.html