本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html

JS部分测试可以,jQuery部分没有测试先留着

HTML

<form id="form1" name="form1">
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" />
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>
<input type="button" onclick="UpladFile()" value="Upload" />
</form>

JS

<script type="text/javascript">
function UpladFile() {
// js 获取文件对象
var fileObj = document.getElementById("fileToUpload2").files;
// 接收上传文件的后台地址
var FileController = "/Home/Upload"; // FormData 对象
var form = new FormData();
// 可以增加表单数据
form.append("author", "hooyes");
// 文件对象
for (var i = 0; i < fileObj.length; i++)
form.append("file" + i, fileObj[i]); // XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
alert("上传完成!");
};
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
} function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
}
</script>

C#

[HttpPost]
public ActionResult Upload()
{
HttpFileCollectionBase fileToUpload = Request.Files;
foreach (string file in fileToUpload)
{
var curFile = Request.Files[file];
if (curFile.ContentLength < 1) continue;
string path = System.IO.Path.Combine(Server.MapPath("~/Upload"), System.IO.Path.GetFileName(curFile.FileName));
curFile.SaveAs(path);
}
return RedirectToAction("Index");
}

jQuery

<script type="text/javascript">
$(document).ready(function () {
$('#form1').submit(function () {
var formdata = new FormData();
var fileObj = document.getElementById("fileToUpload2").files;
for (var i = 0; i < fileObj.length; i++)
formdata.append("file" + i, fileObj[i]);
$.ajax({
type: 'POST',
url: '/Home/Upload2',
data: formdata,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false
}).then(function () {
alert('done');
}, function () {
//failCal
});
return false;
});
$("#btn").bind("click", ajaxUpload);
}); function ajaxUpload() {
$("#form1").submit();
}
</script>

  

Asp.NET MVC4 + Ajax 实现多文件上传的更多相关文章

  1. [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  2. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  3. asp.NET 下真正实现大文件上传

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  4. FormData+Ajax 实现多文件上传 学习使用FormData对象

    FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...

  5. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  6. asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)

    上文件传很常见,现在就文件上传利用HTML的File控件(uploadify)的,这里为大家介绍一下(uploadify)的一些使用方法.在目前Web开发中用的比较多的,可能uploadify(参考h ...

  7. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  8. ASP.NET CORE RAZOR :将文件上传至 ASP.NET Core 中的 Razor 页面

    本部分演示使用 Razor 页面上传文件. 本教程中的 Razor 页面 Movie 示例应用使用简单的模型绑定上传文件,非常适合上传小型文件. 有关流式传输大文件的信息,请参阅通过流式传输上传大文件 ...

  9. ASP.NET知识总结(5.文件上传 文件下载)

    5.文件上传 ->说明:使用http协议只适合传输小文件,如果想传递大文件,则需要使用插件或者客户  端程序(使用ftp协议) ->客户端操作 <1>为表单添加属性:encty ...

随机推荐

  1. C#面向对象二

    1.方法的定义 概念:对象的动态特征就是方法(静态特征是属性),方法表示此对象可以做什么. 类型:实例方法,静态方法,(构造方法,多态时会用到抽象方法和虚方法) 2.注意事项 访问修饰符:默认priv ...

  2. [Swift]字符串(String类、NSString类)常用操作

    NS是Cocoa类对象类型的前缀,来源于乔布斯建立的另一家公司--NeXTNSString的使用方法,和Swift语言中的String有很多相似之处. 1.字符串的定义String类 var str1 ...

  3. mysql数据库表的基本操作sql语句总结

    1,命令行登录命令 mysql -h localhost -u root -p C:\Users\lenovo>mysql -u root -p Enter password: ***** We ...

  4. iOS 开发中类似上下滚动弹幕实现原理

    #mark ---滚动弹幕 列表中留有7条记录  大于7条时删除并指引表视图向上滑动 - (void)addRowActionWithContent:(NSString *)str { if (sel ...

  5. 对csrf的理解

    用户浏览并登陆信任网站A 通过验证,在用户浏览器产出A的cookie 用户在没有登出A的情况下访问攻击网站B B要求访问第三方站点A,发出一个请求 根据B的请求,浏览器带着A的cookie访问A A不 ...

  6. python之类与对象(5)

    6. 类的多继承与超继承 6.1 多继承 python的类还有一个特点,就是可以继承多个类.但是我们作为测试人员,在实际中很少用到这个多继承,这里不就详细(一直都不详细,hhhh)写了.上代码: #! ...

  7. 标准结构篇:4)EMC电磁兼容

    本章目的:电磁兼容EMC概念,及预防控制手段. 1.前言:电磁兼容EMC概述 电磁兼容是一门新兴的综合性学科.电磁兼容学科主要研究的是如何使在同一电磁环境下工作的各种电气电子设备和元器件都能正常工作, ...

  8. annotation-config和component-scan

    以前学到<context:annotation-config></context:annotation-config>和<context:component-scan b ...

  9. @RequestMapping 和 @RequestBody的区别

    @RequestMapping要求:application/x-www-form-urlencoded 或不填 @RequestBody要求: application/json

  10. vue 深度响应初步了解(检测data对象数据变化)

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...