**SWFUpload 多文件上传带进度条实例详解**
SWFUpload 是一款开源的JavaScript库，专门用于在网页上实现文件的多选上传，并且支持显示上传进度条，为用户提供更好的交互体验。在这个实例中，我们将探讨如何在VS2012环境下，使用.NET Framework 4.0开发一个基于SWFUpload的多文件上传功能。
让我们理解SWFUpload的工作原理。SWFUpload是基于Flash技术的，它创建了一个隐藏的Flash对象，用户通过JavaScript与这个对象进行交互。当用户选择文件后，SWFUpload会利用Flash的多线程上传能力，将文件分块上传，并实时反馈上传进度。这种技术使得即使在没有HTML5的环境中，也能实现类似的功能。
1. **设置环境**
在VS2012中创建一个新的ASP.NET Web应用程序项目，确保目标框架为.NET Framework 4.0。然后，需要将SWFUpload库及其相关的CSS和JavaScript文件添加到项目的`Scripts`或`Content`目录下。
2. **HTML结构**
在页面中，我们需要一个按钮让用户触发文件选择对话框，以及一个区域来显示上传进度。HTML代码可能如下：
```html
<div id="swfuploadContainer">
<button id="fileButton">选择文件</button>
<div id="status"></div>
</div>
```
3. **JavaScript配置**
接下来，我们需要配置SWFUpload实例，指定服务器处理文件上传的URL、允许的文件类型和大小等参数。在页面的`<script>`标签内编写如下代码：
```javascript
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url: "UploadHandler.ashx", // 服务器处理文件上传的地址
file_post_name: "Filedata",
file_size_limit: "10 MB", // 文件大小限制
file_types: "*.jpg;*.jpeg;*.png;*.gif", // 允许上传的文件类型
file_types_description: "Image Files",
file_upload_limit: 10, // 最大上传文件数量
flash_url: "Scripts/swfupload.swf",
button_image_url: "Images/browse_button.png",
button_width: 29,
button_height: 29,
button_placeholder_id: "fileButton",
debug: false,
...
});
}
```
4. **事件处理**
SWFUpload 提供了丰富的事件接口，如`fileQueued`、`uploadStart`、`uploadProgress`、`uploadSuccess`等，我们可以通过监听这些事件来更新页面状态，例如显示上传进度条。例如：
```javascript
swfu.addEventListener("uploadProgress", function (file, bytesUploaded, bytesTotal) {
var percent = Math.ceil((bytesUploaded / bytesTotal) * 100);
document.getElementById("status").innerHTML = "上传进度：" + percent + "%";
});
swfu.addEventListener("uploadSuccess", function (file, serverData, responseReceived) {
document.getElementById("status").innerHTML = "文件 " + file.name + " 上传成功！";
});
```
5. **服务器端处理**
在服务器端，我们需要创建一个处理文件上传的逻辑。对于ASP.NET，通常会创建一个`.ashx`的HTTP Handler来接收文件。这个处理器需要读取并保存上传的文件，同时返回确认信息给客户端。
```csharp
public class UploadHandler : IHttpHandler {
public void ProcessRequest(HttpContext context) {
if (context.Request.Files.Count > 0) {
for (int i = 0; i < context.Request.Files.Count; i++) {
HttpPostedFile file = context.Request.Files[i];
string fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
file.SaveAs(Server.MapPath("~/uploads/" + fileName));
}
context.Response.Write("文件上传成功！");
}
}
// 其他IHttpHandler接口实现...
}
```
6. **安全性与优化**
为了确保安全，我们需要对上传的文件进行验证，比如检查文件类型、大小，防止恶意文件上传。同时，可以考虑使用异步处理来提升用户体验，例如使用后台队列服务处理文件。
总结，SWFUpload 实例提供了在不支持HTML5的浏览器中实现多文件上传带进度条的功能，通过结合Flash和JavaScript技术，实现了良好的用户交互。通过VS2012和.NET Framework 4.0，我们可以方便地构建服务器端的处理逻辑，确保文件上传的安全和效率。在实际应用中，还可以根据需求进行更复杂的定制和扩展，如添加错误处理、文件预览等功能。
