jquery组件WebUploader文件上传用法详解

下面我将为你详细讲解"jquery组件WebUploader文件上传用法详解"。

一、WebUploader简介

WebUploader是由百度前端开发所有的一款简单易用、灵活且可扩展的文件上传组件，可用于PC端和移动端的文件上传。

二、WebUploader使用步骤

1. 下载WebUploader组件；
2. 引入必要的js和css文件；
3. 创建容器用于显示上传组件；
4. 实例化WebUploader；
5. 设置相关参数；
6. 绑定事件监听。

示例1：实现简单文件上传

html代码如下：

<div id="uploader">
    <div class="file-list"></div>
    <div class="btns">
        <button id="picker">选择文件</button>
        <button id="startUpload">上传文件</button>
    </div>
</div>

js代码如下：

// 创建上传组件
var uploader = WebUploader.create({
    // 指定选择文件的按钮
    pick: '#picker',
    // 是否开启自动上传
    auto: false,
    // 文件上传请求的参数（可选）
    formData: {
        'user': 'guest'
    },
    // 选完文件后，是否自动上传。
    auto: true,
    // 文件上传数量限制
    fileNumLimit: 5,
    // 上传文件大小限制，单位为字节（B），默认2G。可以具体指定某个文件的大小限制
    fileSizeLimit: 2 * 1024 * 1024,
    fileSingleSizeLimit: 500 * 1024,
    // 服务器上传接口
    server: 'upload.php'
});

// 添加文件选择框事件
$('#picker').click(() => {
    // 选择文件
    uploader.chooseFile();
});

// 绑定上传事件
$('#startUpload').click(() => {
    // 执行上传操作
    uploader.upload();
});

// 监听文件上传成功事件
uploader.on('uploadSuccess', (file, response) => {
    console.log(response);
    alert('文件上传成功');
});

// 监听文件上传出错事件
uploader.on('uploadError', function (file) {
    alert('文件上传出错');
});

// 监听文件上传完成事件
uploader.on('uploadComplete', function (file) {
    alert('文件上传完成');
});

示例2：实现图片上传并显示预览

html代码如下：

<div id="uploader">
    <div class="file-list"></div>
    <div class="btns">
        <button id="picker">选择图片</button>
        <button id="startUpload">上传图片</button>
    </div>
    <div id="preview"></div>
</div>

js代码如下：

// 创建上传组件
var uploader = WebUploader.create({
    // 指定选择文件的按钮
    pick: '#picker',
    // 是否开启自动上传
    auto: false,
    // 选完文件后，是否自动上传。
    auto: true,
    // 文件上传数量限制
    fileNumLimit: 5,
    // 上传文件大小限制，单位为字节（B），默认2G。可以具体指定某个文件的大小限制
    fileSizeLimit: 2 * 1024 * 1024,
    fileSingleSizeLimit: 500 * 1024,
    // 上传的文件类型（可选）
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/gif,image/jpeg,image/png,image/bmp'
    },
    // 服务器上传接口
    server: 'upload.php'
});

// 添加文件选择框事件
$('#picker').click(() => {
    // 选择文件
    uploader.chooseFile();
});

// 绑定上传事件
$('#startUpload').click(() => {
    // 执行上传操作
    uploader.upload();
});

// 监听文件加入队列事件
uploader.on('fileQueued', (file) => {
    console.log(file);
    // 获取预览图片容器
    var $preview = $('#preview');

    // 创建图片预览对象
    var img = $('<img />', {
        src: '',
        style: 'width: 200px;height: 200px;margin-right: 10px;'
    });

    // 添加图片预览对象到容器中
    $preview.append(img);

    // 创建读取文件对象
    var reader = new FileReader();

    // 图片预览事件监听
    reader.onload = (function (f) {
        return function (e) {
            // 将图片预览对象的src属性设置为读取文件事件的result属性值（即文件DataURL）
            img.attr('src', e.target.result);
        };
    })(file);

    // 将当前文件读取为DataURL
    reader.readAsDataURL(file.getSource());
});

// 监听文件上传成功事件
uploader.on('uploadSuccess', (file, response) => {
    console.log(response);
    alert('文件上传成功');
});

// 监听文件上传出错事件
uploader.on('uploadError', function (file) {
    alert('文件上传出错');
});

// 监听文件上传完成事件
uploader.on('uploadComplete', function (file) {
    alert('文件上传完成');
});

以上就是WebUploader的基本用法了，如果你想了解更多详细的用法可以去WebUploader官网查看其API文档及示例。