MVC项目中实现WebUploader的多附件上传功能,并且在上传过程中显示进度条,提升用户体验。WebUploader是由百度开发的一个前端文件上传组件,支持多文件选择、断点续传以及文件预览等功能。
我们需要在
MVC项目中引入WebUploader的JavaScript库。这通常通过NuGet包管理器完成,或者手动下载并添加到项目的Scripts目录。确保包括`webuploader.min.js`以及其相关的CSS文件。
接下来,我们需要在视图(View)中创建HTML结构来显示上传界面。创建一个容器元素,如`
`,并为其添加WebUploader所需的ID。例如:
```html
```
然后,我们需要编写JavaScript代码来初始化WebUploader实例,并设置上传事件监听器。在页面加载完成后,调用WebUploader的`webuploader()`方法,配置参数如服务器URL、文件类型限制等:
```javascript
$(function () {
var uploader = WebUploader.create({
swf: '/Scripts/Uploader.swf', // SWF路径
server: '/Home/Upload', // 上传接口
pick: '#filePicker', // 选择文件按钮
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
auto: true, // 自动上传
fileNumLimit: 3, // 最大上传数量
fileSingleSizeLimit: 5 * 1024 * 1024, // 单个文件最大大小
formData: { key: 'value' } // 添加额外的POST参数
});
// 上传进度监听
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.percentage');
$percent.css('width', percentage * 100 + '%');
$percent.html(percentage * 100 + '%');
});
// 上传完成监听
uploader.on('uploadSuccess', function (file, response) {
var $li = $('#' + file.id);
$li.addClass('upload-state-done');
// 在这里处理返回的响应数据,例如保存文件URL
});
// 开始上传
$('#uploadBtn').on('click', function () {
uploader.upload();
});
});
```
在服务器端,我们需要在
ASP.NET MVC的HomeController中创建一个名为`Upload`的动作方法,接收上传的文件并处理。使用`HttpPostedFileBase`接收文件,并确保已启用MVC模型绑定来处理多文件上传:
```csharp
[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] files)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/uploads"), fileName);
file.SaveAs(path);
// 在这里处理保存后的文件,例如存储到数据库或进行其他业务逻辑
}
}
return Json(new { success = true }); // 返回JSON响应
}
```
记得在`Web.config`文件中开启MVC的多部分表单数据处理,以便能够接收多个文件:
```xml
```
确保在`Global.asax.cs`的`Application_Start`方法中,启用路由规则,指向`HomeController`的`Upload`方法:
```csharp
routes.MapRoute(
name: "Upload",
url: "Home/Upload",
defaults: new { controller = "Home", action = "Upload" }
);
```
以上就是使用
ASP.NET MVC结合WebUploader实现多附件上传及进度条显示的基本步骤。你可以根据需求调整代码,例如增加错误处理、文件类型验证、图片预览等高级功能。通过这种方式,用户可以方便地上传多个文件,并实时看到上传进度,提高了交互体验。
1