Plupload使用

**Plupload 概述** Plupload 是一个强大的跨平台文件上传组件，它支持多种上传方式，包括 Adobe Flash、Google Gears、HTML5、Microsoft Silverlight 和 Yahoo BrowserPlus，以及传统的表单提交方式。Plupload 提供了丰富的特性，如上传进度提示、图片预览、多文件同时上传、文件类型过滤和分块上传等。然而，值得注意的是，这些功能在不同的上传模式下可能存在差异，某些可能仅在特定的运行环境中可用。 **引入与使用 Plupload** 在项目中使用 Plupload 需要经过以下几个步骤： 1. **引入 JS 文件**：需要下载 Plupload 的源代码并将其放置在项目中适当的文件夹内。例如，可以将 `plupload.full.min.js` 放在 `js` 目录下。 2. **HTML 结构**：创建基本的 HTML 结构，至少包含一个用于触发文件选择对话框的按钮，如 `browse` 按钮，以及一个用于开始上传的按钮，如 `start_upload` 按钮。 ```html

选择文件 开始上传

``` 3. **实例化 Plupload 对象**：使用 JavaScript 实例化一个 `plupload.Uploader` 对象，并传入配置参数，包括指定触发文件选择的按钮 ID、运行环境、服务器端的上传地址以及 SWF 和 Silverlight 文件路径。 ```javascript var uploader = new plupload.Uploader({ browse_button : 'browse', runtimes : 'html5,html,flash,silverlight', url : '${pageContext.request.contextPath}/uploadFile.do?type=${type}&uploadPath=${uploadPath}', flash_swf_url : 'js/Moxie.swf', silverlight_xap_url : 'js/Moxie.xap' }); ``` 4. **初始化**：调用 `uploader.init()` 方法初始化上传组件。 5. **事件绑定**：注册事件监听器以响应 Plupload 在文件选择、上传进度、错误处理等阶段触发的事件。例如，`FilesAdded` 事件用于在文件被添加到上传队列时执行某些操作，而 `UploadProgress` 事件则可用来更新上传进度。 ```javascript uploader.bind('FilesAdded', function(uploader, files) { // 更新 UI 或提示用户 }); uploader.bind('UploadProgress', function(uploader, file) { // 更新 UI，显示上传进度 }); ``` 6. **开始上传**：给 "开始上传" 按钮注册点击事件，调用 `uploader.start()` 开始上传文件。 ```javascript document.getElementById('start_upload').onclick = function() { uploader.start(); }; ``` **关键功能及事件** Plupload 的核心特性包括： - **多文件上传**：允许用户一次性选择多个文件进行上传。 - **文件类型过滤**：通过配置文件类型限制，可以防止用户上传不符合要求的文件。 - **上传进度**：通过 `UploadProgress` 事件，可以实时展示每个文件的上传进度。 - **Chunked 上传**：大文件可以被分成小块上传，提高上传效率和成功率。 - **拖放上传**：在支持 HTML5 的环境中，用户可以直接将文件拖放到上传区域进行上传。 - **图片预览**：对于图片文件，Plupload 可以提供预览功能。 **注意事项** 在实际使用中，需要确保服务器端能正确处理 Plupload 上传的文件，因为这里仅讨论前端部分。此外，考虑到兼容性问题，应确保为不支持 HTML5 的浏览器提供备用的上传方式，如 Flash 或 Silverlight。 Plupload 是一个功能强大且灵活的文件上传解决方案，通过其丰富的特性，可以轻松地实现各种定制化的上传需求。在实际项目中，开发者可以根据具体需求调整配置参数和事件处理，以提供良好的用户体验。