webuploader小程序开发

WebUploader是一款基于HTML5的现代文件上传组件，可以支持多文件上传、自动压缩、拖拽上传等功能。WebUploader既可以用于Web网站，也可以用于移动端开发，为开发者提供了便捷的文件上传解决方案。

在小程序开发中，也可以使用WebUploader进行文件上传。WebUploader针对小程序开发进行了改进，提供了适用于小程序的上传组件。下面详细介绍WebUploader在小程序中的使用原理及步骤。

1. 下载和引用WebUploader

首先，我们需要到WebUploader官网或者Github上下载WebUploader，解压后将文件放置在小程序的utils目录下。然后在小程序需要上传的页面中引用WebUploader组件。

2. 配置WebUploader

在使用WebUploader之前，需要对其进行配置。WebUploader的配置包含参数、事件和方法等多个方面，可以自由设置。

3. 创建上传按钮

当WebUploader配置完成后，创建一个上传按钮。在小程序的wxml文件中插入以下代码。

```

选择文件

```

4. 定义上传文件列表

在wxml文件中定义用于显示上传文件列表的div元素，以下是示例代码。

```

```

5. 绑定上传事件

定义好上传按钮和文件列表后，需要为上传按钮绑定上传事件。在js文件中插入以下代码。

```

var uploader = WebUploader.create({

auto: true, //选择文件后是否自动上传

swf: '/utils/Uploader.swf', //使用Flash来上传大文件

server: '上传服务器地址',

pick: '#picker', //选择文件按钮

formData: { //以键值对形式发送到服务器的额外参数

'token': '上传验证的token'

},

fileNumLimit: 5, //允许上传的最大文件数量

fileSizeLimit: 200 * 1024 * 1024, //允许上传的最大文件大小

fileSingleSizeLimit: 50 * 1024 * 1024, //允许上传的单个文件大小的最大值

resize: false, //是否压缩图片

chunked: false, //是否分片上传文件

chunkSize: 512 * 1024 //切片大小，默认为5MB

});

// 添加文件进入队列时触发

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

$( '#picker-list' ).append( '' +

'' + file.name + '' +

'' + WebUploader.formatSize( file.size ) + '' +

'等待上传' +

'删除' +

'' );

});

// 文件上传进度

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

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

$percent = $li.find('.progress .progress-bar');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('' +

'' +

'' +

'').appendTo( $li ).find('.progress-bar');

}

$li.find('td:eq(2)').html('上传中');

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

});

// 文件上传成功

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

$( '#'+file.id ).find('td:eq(2)').html('上传成功');

});

// 文件上传失败

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

$( '#'+file.id ).find('td:eq(2)').html('上传失败');

});

// 完成上传完后执行

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

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

});

```

6. 实现删除文件操作

为了方便用户维护上传的文件列表，可以为文件列表中的文件提供删除操作。在js文件中添加以下代码。

```

// 删除文件

$( '#picker-list' ).on( 'click', '.delete', function() {

var id = $(this).parents('tr').attr('id');

uploader.removeFile( uploader.getFile( id ) );

$( '#'+id ).fadeOut();

});

```

通过以上步骤，就可以在小程序中使用WebUploader进行文件上传了。WebUploader还支持多种自定义配置和事件，可以根据需求进行调整。

总结来说，使用WebUploader进行文件上传分为以下几个步骤：下载和引用WebUploader，配置WebUploader，创建上传按钮，定义上传文件列表，绑定上传事件，实现删除文件操作。通过细致的配置和定制，开发者可以快速地创建适合自己需求的文件上传功能。