asp.net mvc版本 webuploader多附件上传 带进度条
ASP.NET MVC是一个强大的框架，用于构建动态、数据驱动的Web应用程序。在这个场景中，我们讨论的是如何在ASP.NET MVC项目中实现WebUploader的多附件上传功能，并且在上传过程中显示进度条，提升用户体验。WebUploader是由百度开发的一个前端文件上传组件，支持多文件选择、断点续传以及文件预览等功能。
我们需要在ASP.NET 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实现多附件上传及进度条显示的基本步骤。你可以根据需求调整代码，例如增加错误处理、文件类型验证、图片预览等高级功能。通过这种方式，用户可以方便地上传多个文件，并实时看到上传进度，提高了交互体验。
0%
开始上传
取消上传
文件下载
资源详情
[{"title":"（ 299 个子文件 3.41MB ） asp.net mvc版本 webuploader多附件上传 带进度条","children":[{"title":"Global.asax <span style='color:#111;'> 107B </span>","children":null,"spread":false},{"title":"UpLoadEnclosure.csprojResolveAssemblyReference.cache <span style='color:#111;'> 51.67KB </span>","children":null,"spread":false},{"title":"DesignTimeResolveAssemblyReferencesInput.cache <span style='color:#111;'> 25.37KB </span>","children":null,"spread":false},{"title":"UpLoadEnclosure.dll.config <span style='color:#111;'> 2.00KB </span>","children":null,"spread":false},{"title":"Web.config <span style='color:#111;'> 2.00KB </span>","children":null,"spread":false},{"title":"web.config <span style='color:#111;'> 1.62KB </span>","children":null,"spread":false},{"title":"Web.Release.config <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"Web.Debug.config <span style='color:#111;'> 1.22KB </span>","children":null,"spread":false},{"title":"packages.config <span style='color:#111;'> 681B </span>","children":null,"spread":false},{"title":"repositories.config <span style='color:#111;'> 134B </span>","children":null,"spread":false},{"title":"HomeController.cs <span style='color:#111;'> 4.36KB </span>","children":null,"spread":false},{"title":"AssemblyInfo.cs <span style='color:#111;'> 1.29KB </span>","children":null,"spread":false},{"title":"RouteConfig.cs <span style='color:#111;'> 608B </span>","children":null,"spread":false},{"title":"ImageData.cs <span style='color:#111;'> 599B </span>","children":null,"spread":false},{"title":"Global.asax.cs <span style='color:#111;'> 429B </span>","children":null,"spread":false},{"title":"TemporaryGeneratedFile_5937a670-0e60-4077-877b-f7221da3dda1.cs <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"TemporaryGeneratedFile_E7A71F73-0F8D-4B9B-B56E-8E70B10BC5D3.cs <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"TemporaryGeneratedFile_036C0B5B-1481-4323-8D20-8F5ADCB23D92.cs <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"Index.cshtml <span style='color:#111;'> 4.99KB </span>","children":null,"spread":false},{"title":"UpLoadEnclosure.csproj <span style='color:#111;'> 20.79KB </span>","children":null,"spread":false},{"title":"H-ui.min.css <span style='color:#111;'> 186.80KB </span>","children":null,"spread":false},{"title":"H-ui.css <span style='color:#111;'> 154.13KB </span>","children":null,"spread":false},{"title":"bootstrap.css <span style='color:#111;'> 144.54KB </span>","children":null,"spread":false},{"title":"webuploader.css <span style='color:#111;'> 10.22KB </span>","children":null,"spread":false},{"title":"H-ui.admin.css <span style='color:#111;'> 6.88KB </span>","children":null,"spread":false},{"title":"H-ui.reset.css <span style='color:#111;'> 3.21KB </span>","children":null,"spread":false},{"title":"H-ui.ie.css <span style='color:#111;'> 2.75KB </span>","children":null,"spread":false},{"title":"H-ui.login.css <span style='color:#111;'> 2.09KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.25KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.23KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.23KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.23KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.23KB </span>","children":null,"spread":false},{"title":"skin.css <span style='color:#111;'> 1.15KB </span>","children":null,"spread":false},{"title":"style.css <span style='color:#111;'> 44B </span>","children":null,"spread":false},{"title":"System.Web.Mvc.dll <span style='color:#111;'> 552.20KB </span>","children":null,"spread":false},{"title":"System.Web.Mvc.dll <span style='color:#111;'> 552.20KB </span>","children":null,"spread":false},{"title":"System.Web.Razor.dll <span style='color:#111;'> 265.70KB </span>","children":null,"spread":false},{"title":"System.Web.Razor.dll <span style='color:#111;'> 265.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.dll <span style='color:#111;'> 206.70KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.dll <span style='color:#111;'> 206.70KB </span>","children":null,"spread":false},{"title":"System.Web.Helpers.dll <span style='color:#111;'> 136.70KB </span>","children":null,"spread":false},{"title":"System.Web.Helpers.dll <span style='color:#111;'> 136.70KB </span>","children":null,"spread":false},{"title":"Microsoft.Web.Infrastructure.dll <span style='color:#111;'> 44.35KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Deployment.dll <span style='color:#111;'> 40.70KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.Deployment.dll <span style='color:#111;'> 40.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Razor.dll <span style='color:#111;'> 38.70KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.Razor.dll <span style='color:#111;'> 38.70KB </span>","children":null,"spread":false},{"title":"System.Web.Mvc.resources.dll <span style='color:#111;'> 35.20KB </span>","children":null,"spread":false},{"title":"System.Web.Mvc.resources.dll <span style='color:#111;'> 35.20KB </span>","children":null,"spread":false},{"title":"System.Web.Mvc.resources.dll <span style='color:#111;'> 35.20KB </span>","children":null,"spread":false},{"title":"System.Web.Razor.resources.dll <span style='color:#111;'> 26.20KB </span>","children":null,"spread":false},{"title":"System.Web.Razor.resources.dll <span style='color:#111;'> 26.20KB </span>","children":null,"spread":false},{"title":"System.Web.Razor.resources.dll <span style='color:#111;'> 26.20KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.resources.dll <span style='color:#111;'> 20.20KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.resources.dll <span style='color:#111;'> 20.20KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.resources.dll <span style='color:#111;'> 20.20KB </span>","children":null,"spread":false},{"title":"System.Web.Helpers.resources.dll <span style='color:#111;'> 15.70KB </span>","children":null,"spread":false},{"title":"System.Web.Helpers.resources.dll <span style='color:#111;'> 15.70KB </span>","children":null,"spread":false},{"title":"System.Web.Helpers.resources.dll <span style='color:#111;'> 15.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Deployment.resources.dll <span style='color:#111;'> 12.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Deployment.resources.dll <span style='color:#111;'> 12.70KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.Deployment.resources.dll <span style='color:#111;'> 12.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Razor.resources.dll <span style='color:#111;'> 11.70KB </span>","children":null,"spread":false},{"title":"System.Web.WebPages.Razor.resources.dll <span style='color:#111;'> 11.70KB </span>","children":null,"spread":false},{"title":"System.Web.Webpages.Razor.resources.dll <span style='color:#111;'> 11.70KB </span>","children":null,"spread":false},{"title":"UpLoadEnclosure.dll <span style='color:#111;'> 10.50KB </span>","children":null,"spread":false},{"title":"UpLoadEnclosure.dll <span style='color:#111;'> 10.50KB </span>","children":null,"spread":false},{"title":"35.gif <span style='color:#111;'> 13.08KB </span>","children":null,"spread":false},{"title":"71.gif <span style='color:#111;'> 13.05KB </span>","children":null,"spread":false},{"title":"69.gif <span style='color:#111;'> 10.20KB </span>","children":null,"spread":false},{"title":"loading.gif <span style='color:#111;'> 8.28KB </span>","children":null,"spread":false},{"title":"18.gif <span style='color:#111;'> 7.95KB </span>","children":null,"spread":false},{"title":"19.gif <span style='color:#111;'> 7.94KB </span>","children":null,"spread":false},{"title":"11.gif <span style='color:#111;'> 7.84KB </span>","children":null,"spread":false},{"title":"32.gif <span style='color:#111;'> 7.20KB </span>","children":null,"spread":false},{"title":"78.gif <span style='color:#111;'> 6.21KB </span>","children":null,"spread":false},{"title":"31.gif <span style='color:#111;'> 5.59KB </span>","children":null,"spread":false},{"title":"99.gif <span style='color:#111;'> 5.18KB </span>","children":null,"spread":false},{"title":"75.gif <span style='color:#111;'> 5.04KB </span>","children":null,"spread":false},{"title":"85.gif <span style='color:#111;'> 4.88KB </span>","children":null,"spread":false},{"title":"8.gif <span style='color:#111;'> 4.88KB </span>","children":null,"spread":false},{"title":"29.gif <span style='color:#111;'> 4.79KB </span>","children":null,"spread":false},{"title":"74.gif <span style='color:#111;'> 4.58KB </span>","children":null,"spread":false},{"title":"5.gif <span style='color:#111;'> 4.56KB </span>","children":null,"spread":false},{"title":"45.gif <span style='color:#111;'> 4.37KB </span>","children":null,"spread":false},{"title":"33.gif <span style='color:#111;'> 4.35KB </span>","children":null,"spread":false},{"title":"72.gif <span style='color:#111;'> 4.22KB </span>","children":null,"spread":false},{"title":"0.gif <span style='color:#111;'> 4.02KB </span>","children":null,"spread":false},{"title":"26.gif <span style='color:#111;'> 3.92KB </span>","children":null,"spread":false},{"title":"loading-b.gif <span style='color:#111;'> 3.90KB </span>","children":null,"spread":false},{"title":"7.gif <span style='color:#111;'> 3.86KB </span>","children":null,"spread":false},{"title":"10.gif <span style='color:#111;'> 3.74KB </span>","children":null,"spread":false},{"title":"76.gif <span style='color:#111;'> 3.73KB </span>","children":null,"spread":false},{"title":"80.gif <span style='color:#111;'> 3.64KB </span>","children":null,"spread":false},{"title":"49.gif <span style='color:#111;'> 3.59KB </span>","children":null,"spread":false},{"title":"66.gif <span style='color:#111;'> 3.49KB </span>","children":null,"spread":false},{"title":"205.gif <span style='color:#111;'> 3.39KB </span>","children":null,"spread":false},{"title":"91.gif <span style='color:#111;'> 3.34KB </span>","children":null,"spread":false},{"title":"9.gif <span style='color:#111;'> 3.33KB </span>","children":null,"spread":false},{"title":"......","children":null,"spread":false},{"title":"<span style='color:steelblue;'>文件过多，未全部展示</span>","children":null,"spread":false}],"spread":true}]
评论信息
其他资源
- 博雅互动源代码.zip
- 多道批处理作业调度模拟程序
- pscad IEEE标准系统搭建说明
- 基于Tensorflow的人脸识别源码
- 北航计算机组成实验Project4
- QT5获取USB设备信息+PID+VID+序列号+热插拔
- Interactive Computer Graphics：A Top-Down Approach with WebGL (7th Edition)
- WEUI整套移动端模板源码
- yolov3_coco.ckpt.index
- Android各类音频播放器源码集合(共37个)
- giASyTK1013.rar
- Oracle 6.5 静默安装11g数据库.pdf
- OpenPose人体姿态识别库中文帮助文档.pdf
- canvas签名板支持pc和移动端，可自行调节样式
- openClassPlugin.jar
- OceanStor 融合存储系列.rar
- M1 Dock智能硬件工具（MaixPy安装）
- .net机票预订系统源码
- 基于Android的音乐播放器
- C#应用程序设计教程+课后习题答案.rar
- EditPlus4中文绿色破解版
免责申明
【只为小站】的资源来自网友分享，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论 【只为小站】 经营者是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明