使用WebUploader实现上传文件功能（一）

使用WebUploader实现上传文件功能（一）是一篇介绍如何在网站中使用WebUploader插件来实现文件上传功能的文章。

以下是该文章的详细攻略：

1. 确认环境

在使用WebUploader之前，需要确认网站中是否已经引入了jQuery和WebUploader的JavaScript文件。如果没有引入，需要先在需要使用上传功能的页面中引入这些文件。

2. 创建容器

在页面中创建一个容器元素，用于显示上传文件列表和上传进度等信息。例如：

<div id="uploader">
    <div class="queueList">
        <div id="dndArea" class="placeholder">
            <div class="filePicker"></div>
            <p>或将文件拖到这里，单次最多可选300个文件</p>
        </div>
    </div>
    <div class="statusBar" style="display:none;">
        <div class="progress">
            <span class="text">0%</span>
            <span class="percentage"></span>
        </div><div class="info"></div>
        <div class="btns">
            <div class="filePicker2"></div><div class="uploadBtn">开始上传</div>
        </div>
    </div>
</div>

3. 创建WebUploader实例

在页面加载完成后，创建WebUploader实例，并初始化参数。例如：

<script type="text/javascript">
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',

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

        // 选择文件的按钮容器，不指定则不创建按钮。
        pick: '#filePicker',

        // 只允许选择文件，可选。
        accept: {
            title: 'Files',
            extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx',
            mimeTypes: 'application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint'
        }
    });
</script>

其中，参数的含义如下：

• auto：选完文件后，是否自动上传，默认为false。
• swf：Uploader.swf文件所在的路径。
• server：文件上传的服务器端地址。
• pick：选择文件的按钮容器，可以是一个元素，也可以是一个CSS选择器。
• accept：对上传文件的类型和大小进行限制。

4. 定义上传事件

定义上传开始、上传过程和上传结束等事件，以便在上传过程中更新上传进度和文件列表等信息。例如：

<script type="text/javascript">
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $('#fileList').append( $li );

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 100, 100 );
    });

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

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }

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

    // 文件上传成功，给item添加成功class，并移除上传按钮
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('.text').text('上传出错');
    });
</script>

其中，上传事件的含义如下：

• fileQueued：当有文件被添加进队列的时候触发。
• uploadProgress：文件上传过程中创建进度条实时显示。
• uploadSuccess：文件上传成功，给相应的文件添加上传成功的样式。
• uploadError：文件上传失败，显示上传出错信息。

5. 示例说明

示例1：上传文件到服务器端

以下示例将文件上传到服务器端，以PHP为例。

<?php
    $targetDir = '/uploads/';
    $tempFile   = $_FILES['file']['tmp_name'];
    $targetFile = $targetDir . basename($_FILES['file']['name']);
    move_uploaded_file($tempFile, $targetFile);
?>

示例2：使用SDK将文件上传到阿里云OSS

以下示例使用阿里云OSS SDK将文件上传到阿里云OSS，并返回文件的访问URL。

<script type="text/javascript">
    var uploader = WebUploader.create({
        // ...

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

        // ...

        // 文件上传成功，获取文件访问URL
        uploader.on( 'uploadSuccess', function( file, response ) {
            var filename = response.filename;

            OSS.urllib.request(filename, {
                    method: 'GET'
                }, function (err, response) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    console.log(response);
            });
        });

        // ...

    });
</script>

其中，filename是在上传成功后返回的OSS文件路径。通过OSS.urllib.request方法，获取该文件的访问URL。实际使用中，需要安装和配置好阿里云OSS SDK。

阅读剩余 74%