【亲测免费】 WebUploader 使用教程

1. 项目目录结构及介绍

WebUploader 的目录结构如下：

.
├── flash                  # Flash运行时的源码和实现
├── html5                   # HTML5运行时的源码和实现
├── lib                     # 公共库和辅助函数
│   ├── base.js             # 基础工具类
│   ├── blob.js             # Blob对象操作
│   └── ...                 # 其它必要的库
├── runtime.js              # 运行时接口封装
├── uploader.js             # 主要的Uploader类
└── widgets                 # 功能组件
    ├── filednd.js          # 文件拖拽组件
    ├── filepaste.js        # 图片粘贴组件
    ├── filepicker.js       # 文件选择组件
    ├── image.js            # 图片处理组件
    ├── queue.js            # 文件队列管理组件
    ├── runtime.js          # 运行时信息组件
    ├── upload.js           # 上传逻辑组件
    ├── validator.js        # 验证组件
    └── widget.js            # Command机制实现组件

这个目录结构清晰地展示了WebUploader的模块化设计，方便开发者理解和扩展。

2. 项目的启动文件介绍

WebUploader的启动通常始于uploader.js文件。在这个文件中，你可以创建一个新的WebUploader.Uploader实例，如以下示例所示：

var uploader = new WebUploader.Uploader({
    swf: 'path_to_SWF_file/Uploader.swf', 
    // 其他配置项...
});

这里的Uploader对象提供了大部分的配置选项以及对外的API接口，如设置上传参数、监听事件、添加文件等。

3. 项目的配置文件介绍

WebUploader的配置主要是通过创建Uploader实例时传递的对象进行的。常见的配置项包括：

• swf: Flash运行时文件路径，对于不支持HTML5的浏览器使用。
• server: 服务器接收文件的URL。
• pick: 指定文件选择器元素或其配置。
• dnd: 文件拖放区域配置。
• paste: 粘贴图片的DOM元素。
• accept: 接受的文件类型。
• threads: 并发上传线程数。
• filesizeLimit: 最大文件大小限制。

例如，一个基本配置可能如下：

var uploader = new WebUploader.Uploader({
    swf: 'js/Uploader.swf',
    server: '/upload.php',
    pick: '#filePicker',
    accept: {
        title: 'Images',
        extensions: 'jpg,jpeg,gif,bmp,png',
        mimeTypes: 'image/*'
    },
    threads: 4,
    filesizeLimit: '10MB'
});

以上是WebUploader的基本使用和配置介绍，更多详细API和事件请参考官方文档。了解这些内容后，您可以根据自身项目需求进行定制和集成。