Web Uploader Demo示例

Web Uploader官方下载最新有一个bug，建议使用：

http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js

Demo示例：

ar host = window.location.host;
var $list = $("#thelist");   //这几个初始化全局的百度文档上没说明，好蛋疼。
var $btn = $("#ctlBtn");
// 初始化Web Uploader
var uploader = WebUploader.create({

    swf: host + "/static/vendor/webuploader/Uploader.swf",    // 文件接收服务端。
    {#            server: host + '/InteractiveDataBuild/uploadDate/',#}
    server: '/InteractiveDataBuild/uploadDate/',    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#pick',    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,    method: 'POST',    accept: {
        extensions: 'txt,gif'
    },});

// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
    $list.append('<div id="' + file.id + '" class="item row">' +
        '<div class="info col-md-7">' + file.name + '</div>' +
        '<div class="col-md-4 state">等待上传...</div>' +
        '</div>');
});


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

    // 避免重复创建
    if (!$percent.length) {
        $percent = $('<div class="col-md-10 progress progress-striped active">' +
            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
            '</div>' +
            '</div>').appendTo($li).find('.progress-bar');
    }

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

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

uploader.on('uploadAccept', function (object, ret) {
    if (ret.status == 200) {
        // 文件成功
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('div.state').text('已上传');
        });

    } else {
        // 文件上传失败
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('div.state').text(ret.message);
        });
    }
});


// 文件上传完成
uploader.on('uploadComplete', function (file) {
    $('#' + file.id).find('.progress').fadeOut();
});

uploader.on('uploadBeforeSend', data, headers) {
    // block为分块数据。
    // file为分块对应的file对象。
    var file = object.file;
    // 修改data可以控制发送哪些携带数据。
    data.dataType = $('#dataType option:selected').val();
    data.fileType = $('#fileType option:selected').val();
    data.uploadType = $('#uploadType option:selected').val();
});


// 点击上传图片按钮
$btn.on('click', function () {
    if ($('#dataType option:selected').val() == 'none') {
        $('#bad_info').html("");
        $('#bad_info').append('<label style="color:red">错误信息：文件格式必须选择一个</label>')
    } else if ($('#fileType option:selected').val() == 'none') {
        $('#bad_info').html("");
        $('#bad_info').append('<label style="color:red">错误信息：数据类型必须选择一个</label>')
    }
    else if ($('#uploadType option:selected').val() == 'none') {
        $('#bad_info').html("");
        $('#bad_info').append('<label style="color:red">错误信息：上传类型必须选择一个</label>')
    }
    else {
        uploader.upload();
        console.log("上传成功");
    }

});


$('#clearBtn').on('click', function () {
    $('#thelist').html("");
    $('#bad_info').html("");
    for (var i = 0; i < uploader.getFiles().length; i++) {
        // 将图片从上传序列移除
        uploader.removeFile(uploader.getFiles()[i]);
        //uploader.removeFile(uploader.getFiles()[i], true);
        //delete uploader.getFiles()[i];
        // 将图片从缩略图容器移除
        var $li = $('#' + uploader.getFiles()[i].id);
        $li.off().remove();
    }
    // 重置文件总个数和总大小
    fileCount = 0;
    fileSize = 0;
    // 重置uploader，目前只重置了文件队列
    uploader.reset();
})