**plupload上传组件详解**
plupload是一款强大的JavaScript上传组件，它支持多种浏览器，包括IE6+、Firefox、Chrome、Safari以及Opera等。这个组件以其丰富的功能和良好的跨平台兼容性，深受开发者喜爱。在本文中，我们将深入探讨plupload的主要功能，并通过一个简单的示例来了解其使用方法。
**1. 多文件上传**
plupload支持同时上传多个文件，用户可以选择多个文件一次性上传，极大地提高了上传效率。这种功能在处理大量图片或文档上传时尤为实用，用户无需逐个选择文件，大大提升了用户体验。
**2. 分片上传**
对于大文件上传，plupload提供了分片上传的功能。文件会被切割成较小的数据块进行上传，这样即使网络不稳定，也只需要重传失败的部分，而不需要重新上传整个文件。分片上传不仅提高了上传的成功率，还减少了用户的等待时间。
**3. 显示进度条**
plupload支持实时显示文件上传进度，用户可以清晰地看到每个文件的上传状态，包括已完成的百分比和预计剩余时间。这使得上传过程更加透明，增加了用户对系统响应的感知。
**使用plupload的步骤**
1. **引入库文件**：我们需要在HTML文件中引入plupload的相关文件，包括核心库、UI界面和必要的语言包。
2. **创建上传区域**：在HTML中定义一个用于显示上传界面的元素，通常是一个`div`。
3. **初始化plupload**：通过JavaScript设置plupload的配置选项，如上传URL、分片大小、允许的文件类型等，并将创建的元素作为上传容器。
4. **绑定事件处理函数**：plupload提供了一系列的事件，如`init`、`uploadstart`、`uploadprogress`、`uploadsuccess`等，我们可以根据需要绑定相应的处理函数。
5. **启动上传**：最后调用plupload实例的`start()`方法，开始文件上传。
以下是一个简单的使用示例：
```html
<!DOCTYPE html>
<html>
<head>
<script src="js/plupload.full.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,browserplus',
browse_button: 'container', // 选取文件按钮的ID
url: 'upload.php', // 服务器端的上传接口
max_file_size: '10mb', // 最大文件大小
chunk_size: '1mb', // 分片大小
unique_names: true, // 文件名是否唯一
filters: { mime_types: [ // 只允许上传.jpg .png文件
{ title: "Image files", extensions: "jpg,jpeg,png" }
]}
});
uploader.init();
uploader.bind('Init', function(up) {
console.log('Uploader initialized');
});
uploader.bind('FilesAdded', function(up, files) {
console.log('Files added');
});
// ... 其他事件绑定 ...
uploader.start(); // 开始上传
</script>
</body>
</html>
```
在上述代码中，我们创建了一个plupload实例，设置了上传参数，并绑定了几个关键事件。当用户选择文件后，plupload会自动开始上传并显示进度，直至所有文件上传完成。
在实际应用中，可能还需要对上传结果进行处理，例如验证文件格式、大小，或者处理上传失败的情况。plupload提供了丰富的API和事件机制，开发者可以根据需求进行定制。
通过上述介绍，我们了解了plupload的主要功能及其基本用法。在实际项目中，结合合理的前端设计和服务器端处理，plupload可以构建出高效、友好的文件上传体验。
demoPlupload.rar （31个子文件） 
demoPlupload 
demoPlupload.v11.suo 34KB
demoPlupload.csproj.FileListAbsolute.txt 430B
progress.png 1KB
Moxie.swf 29KB
