如何自定义WebUploader的上传界面

要自定义WebUploader的上传界面，您需要修改其CSS样式和JavaScript配置。以下是一些关键步骤：

1. 引入WebUploader的CSS和JavaScript文件：确保在HTML文件中正确引入了WebUploader的CSS和JavaScript文件。
2. 创建上传容器：在HTML中创建一个容器元素，用于放置上传界面。
3. 自定义上传按钮：通过修改CSS样式来自定义上传按钮的外观。
4. 自定义文件列表：通过修改CSS样式来自定义文件列表的外观。
5. 自定义进度条：通过修改CSS样式来自定义进度条的外观。
6. 自定义信息提示：通过修改JavaScript配置来自定义信息提示的内容和样式。
7. 自定义文件信息：通过修改JavaScript配置来自定义文件信息的显示方式。

以下是一个简单的示例代码，展示了如何自定义WebUploader的上传界面：

    
    
    
    
    
    


    
    

        
        

            
选择文件
        
        
        

        
        

            

            
0%
        
    

    
    
    
    

在custom.css文件中，您可以添加自定义的CSS样式来美化上传界面：

/* 自定义上传按钮 */
#picker {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

/* 自定义文件列表 */
.uploader-list {
    margin-top: 10px;
}

.uploader-list .item {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 100px;
}

/* 自定义进度条 */
#progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #eee;
}

#progress .bar {
    height: 100%;
    background-color: #1ab39a;
    width: 0%;
    transition: width 0.5s;
}

/* 自定义信息提示 */
#uploader .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

在custom.js文件中，您可以添加自定义的JavaScript代码来控制上传过程：

// 初始化WebUploader
var uploader = WebUploader.create({
    // 选项配置
    auto: true,
    swf: 'Uploader.swf',
    server: 'http://webserver.com/fileupload',
    pick: '#picker',
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

// 监听上传进度事件
uploader.on('uploadProgress', function(file, percentage) {
    var $percent = $('#progress .percent');
    $percent.text(percentage * 100 + '%');
    $percent.css('width', percentage * 100 + '%');
});

// 监听上传成功事件
uploader.on('uploadSuccess', function(file, response) {
    alert('上传成功！');
});

// 监听上传失败事件
uploader.on('uploadError', function(file, reason) {
    alert('上传失败：' + reason);
});

以上示例代码展示了如何自定义WebUploader的上传界面，包括上传按钮、文件列表、进度条和信息提示。您可以根据自己的需求进一步调整和优化这些样式和功能。