plupload-2.1.8

Plupload 是一个强大的多浏览器文件上传组件，支持多种浏览器接口，包括Flash, Silverlight, HTML5, 和传统的iframe-based上传方式。版本2.1.8是这个组件的一个稳定版本，包含了丰富的功能和优化，旨在提供无缝的文件上传体验。本文将深入探讨Plupload的核心特性、配置选项以及如何在项目中集成和使用它。 1. **核心特性** - **跨浏览器兼容性**：Plupload 支持所有主流浏览器，包括Chrome, Firefox, Safari, Opera, 以及Internet Explorer 6+。 - **多线程上传**：通过HTML5的File API支持分块上传，提高上传速度和可靠性。 - **断点续传**：在支持HTML5的浏览器中，可以实现文件上传的断点续传。 - **进度条显示**：实时显示上传进度，增强用户体验。 - **文件类型过滤**：可以设置允许上传的文件类型，避免用户上传不合适的文件。 - **多文件选择**：允许用户同时选择多个文件进行批量上传。 - **预览功能**：支持在上传前预览图像文件。 - **错误处理**：能够捕获并显示上传过程中的各种错误。 2. **配置选项** - `runtimes`：定义Plupload尝试使用的运行时顺序，如`"html5,flash,silverlight,iframe"`。 - `url`：文件上传的目标URL。 - `max_file_size`：允许的最大文件大小，例如`"5mb"`。 - `file_data_name`：服务器端接收文件的字段名，默认为`"file"`。 - `filters`：允许上传的文件类型，如`{ mime_types: [ "*.jpg", "*.png" ] }`。 - `multipart`：是否使用multipart/form-data发送文件，默认为`true`。 - `multipart_params`：附加到multipart请求的额外参数。 - `preinit`、`init`、`postinit`等事件处理器，用于自定义上传流程。 3. **使用方法** - 在HTML中引入Plupload的JavaScript和CSS文件，以及相应的运行时支持（如Flash或Silverlight的SWF文件）。 - 创建一个`<div>`作为上传区域，并指定其ID。 - 初始化Plupload实例，设置配置选项，并绑定事件处理器。 - 用户选择文件后，Plupload会自动开始上传。可以通过监听`"upload_start"`、`"upload_progress"`、`"upload_success"`、`"upload_error"`等事件来处理不同阶段的操作。 4. **示例代码** ```javascript var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight,iframe', browse_button: 'pickfiles', // your browse button dom id container: document.getElementById('container'), // parent element for the browse button and file list url: '/upload.php', flash_swf_url: 'js/plupload.flash.swf', silverlight_xap_url: 'js/plupload.silverlight.xap', filters: { max_file_size: '5mb', mime_types: [ { title: "Image files", extensions: "jpg,gif,png" } ] }, init: { PostInit: function() { // your code here }, UploadProgress: function(up, file) { // update progress bar }, FilesAdded: function(up, files) { // files added, potentially start upload up.start(); }, Error: function(up, err) { // handle errors } } }); uploader.init(); ``` 5. **HTML5新特性** 在HTML5环境中，Plupload能利用FileReader API进行文件预览，使用XMLHttpRequest Level 2进行分块上传和断点续传。此外，还可以通过`chunks`配置项控制分块大小，通过`chunk_size`指定每个部分的大小。 Plupload 2.1.8是一个强大的文件上传解决方案，提供了丰富的配置选项和事件处理机制，可适应各种项目需求。了解和掌握这些知识点，将有助于构建高效、稳定的文件上传功能。