.net MVC 实现多文件上传，显示上传进度条，可传多个文件

在.NET MVC框架中，实现多文件上传并展示上传进度条是一项常见的需求，这不仅可以提高用户体验，还能让用户了解文件上传的状态。下面将详细讲解如何通过WebUploader插件来实现这一功能。 1. **WebUploader简介** WebUploader是百度推出的一个前端文件上传组件，支持多文件选择、预览、上传进度显示等功能，兼容大部分现代浏览器。它基于HTML5的File API，对于不支持HTML5的浏览器，会自动降级到Flash。 2. **环境准备** 在开始实现前，确保你已经安装了.NET Framework和Visual Studio，并创建了一个.NET MVC项目。同时，需要在项目中引入WebUploader的相关库文件，包括JavaScript和CSS，可以通过NPM或手动下载添加到项目的`Scripts`和`Content`目录下。 3. **视图(View)部分** 创建一个视图，比如`Upload.cshtml`，在这个页面中，我们需要创建一个用于选择文件的HTML元素，以及一个用于显示进度条的元素。例如： ```html <div id="uploader"> <div class="queueList"> <div id="dnd"></div> <div id="filePicker">选择文件</div> <div class="statusBar"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> </div> </div> </div> ``` 4. **JavaScript配置** 在视图中引入WebUploader的JavaScript文件，并编写配置代码，设置文件选择、上传行为和进度条更新等逻辑： ```javascript $(function () { var uploader = WebUploader.create({ swf: '/Scripts/webuploader/Uploader.swf', server: '@Url.Action("UploadFiles", "Home")', // 服务器端处理URL pick: '#filePicker', auto: true, fileNumLimit: 3, fileSingleSizeLimit: 5 * 1024 * 1024, // 单个文件大小限制 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, onUploadProgress: function (file, percentage) { var $percentage = $('.percentage'); $percentage.text(percentage + '%'); var $bar = $percentage.parent(); $bar.css('width', percentage + '%'); } }); // 服务器端返回结果处理 uploader.on('uploadSuccess', function (file, response) { console.log(response); }); }); ``` 5. **控制器(Controller)部分** 创建一个名为`HomeController`的控制器，添加一个`UploadFiles`动作方法，用于接收上传的文件： ```csharp [HttpPost] public ActionResult UploadFiles(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响应 } ``` 6. **文件存储与管理** 在上面的控制器代码中，我们把上传的文件保存到了服务器的`~/uploads`目录下。你可以根据实际需求，进行文件的存储策略调整，如数据库记录、云存储等。 7. **安全性考虑** 为了保证安全，你需要对上传的文件进行检查，防止恶意文件上传，如检查文件类型、大小，甚至进行病毒扫描。同时，确保上传的文件路径不能被轻易猜测，避免直接暴露文件系统。 8. **错误处理与用户体验** 在JavaScript和控制器中，都应加入适当的错误处理机制，以提示用户上传失败的原因，例如网络问题、文件格式不正确等。 通过以上步骤，你就可以在.NET MVC项目中实现多文件上传并显示上传进度条的功能。这个过程涉及到前端与后端的交互，文件API的使用，以及用户体验的优化，是Web开发中的一个重要实践。