WebUploader怎么实现图片上传功能

WebUploader是一个基于HTML5，JavaScript的文件上传组件，非常适用于上传图片和文件。WebUploader的优点是上传速度快，支持大文件上传，可实现断点续传，还能实现添加文件、删除文件、预览文件等功能，非常方便实用。下面，将介绍如何使用WebUploader实现图片上传功能。

1. 引入WebUploader库

在实现图片上传功能前，首先需要在HTML文件中引入WebUploader库文件。信任的CDN，例如Google CDN或百度 CDN都可以：

<script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js"></script>  
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.css">

2. 创建上传容器

在HTML文件中，创建一个div容器作为上传区域，通过id属性进行引用，同时在JavaScript代码中配置容器属性。可以通过以下代码来实现：

<div id="uploader" class="wu-example">
    <div class="uploader-list-container">
        <div class="queueList">
            <div id="dndArea" class="placeholder">
                <div id="filePicker"></div>
                <p>请点击或拖拽图片文件到此处上传</p>
            </div>
        </div>
    </div>
</div>

其中，div容器的id属性必须与JavaScript代码中的容器id保持一致。

3. 配置WebUploader

在JavaScript中，需要选择需要上传的文件类型、文件大小，以及上传成功、失败后的操作等。这些都可以通过配置代码来实现，以下代码是一个WebUploader的配置样例。

var uploader = WebUploader.create({
    auto: true, 
    // 选择文件后自动上传
    swf: 'lib/Uploader.swf', 
    // 需要指定flash文件路径，当swf文件不在本页面时需要这样指定
    server: '/upload', 
    // 文件接收服务端路径
    pick: '#filePicker',
    // 选择文件按钮，可通过id属性指定
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        // 只允许选择图片文件
        mimeTypes: 'image/*'
    },
    formData: {  
        // 其他参数
    },
    fileVal: 'Filedata',  
    // 文件上传域名，一般不需要修改
    fileSizeLimit: 2 * 1024 * 1024,  
    // 文件大小限制
    fileSingleSizeLimit: 1 * 1024 * 1024,  
    // 单个文件大小限制
    duplicate: true  
    // 可以上传重复文件
});

其中，

- server：为数据处理的服务端，一般为php，java，甚至Python等服务端应用；

- pick：文件选择器；

- accept：指定文件类型；

- auto：选择文件后自动上传；

- swf：flash控件的路径；

- fileSizeLimit：对文件的大小进行限制；

- fileVal：上传文件的key，默认为file，可以修改；

4. 添加文件

可以通过以下代码在JavaScript中添加需要上传的文件：

uploader.addFiles(file);

其中，file为需要上传的文件，类型是File类型。

5. 监听上传进度

上传过程中，可以通过以下代码监控上传进度：

uploader.on( 'progress', function( file, percentage ) {
    var $li = $( '#'+file.id );
    var $percent = $li.find('.progress span');

    // 显示上传进度
    $percent.css( 'width', percentage * 100 + '%' );
});

其中，percentage表示上传百分比。

6. 监听上传成功事件

在上传成功后需要进行的操作，可以通过以下代码实现：

uploader.on( 'uploadSuccess', function( file, response ) {
    // 在此处进行上传成功后的操作
});

其中，response为服务器响应的结果，根据不同的应用场景处理response。

7. 监听上传失败事件

在上传失败后需要进行的操作，可以通过以下代码实现：

uploader.on( 'uploadError', function( file ) {
    // 在此处进行上传失败后的操作
});

其中，file为上传失败的文件对象。

8. 监听全部文件上传成功事件

上传全部文件成功后需要进行的操作，可以通过以下代码实现：

uploader.on('uploadFinished', function(){
    // 在此处进行上传全部完成后的操作
});

9. 删除已上传的文件

上传成功后，可以在页面上删除已上传的文件，以下代码演示如何删除文件：

uploader.on('fileDequeued', function(file) {
    $('#' + file.id).remove();
});

其中，file.id表示要删除的文件的id属性。

以上就是使用WebUploader实现图片上传功能的过程，WebUploader实现简单，功能强大，具备大文件上传、断点续传、添加文件、删除文件、预览文件等功能，非常适用于需要上传和处理图片和文件的应用程序。