本文转自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. Eclipse搭建Android开发环境(安装ADT,Android4.4.2)

    1.检查是否安装JDK, 如果没安装请下载安装 JDK官网http://www.Oracle.com/technetwork/Java/javase/downloads/index.html 2.下载 ...

  2. linux密码修改实验

    1.在单用户模式下进行引导 在不同的运行级别中,一个重要的运行级别就是单用户模式(运行级别1),该模式中,只有一个系统管理员使用特定的机器,而且尽可能少地运行系统服务,其中包含登录.单用户模式对少数管 ...

  3. Docker 下系统日志恢复

    众所周知,docker 是一款进程级虚拟机.上文我们已经分析解释了该如何使用,本文针对日志消失问题进行恢复与解释. Docker 可以理解为阉割版的系统,内部功能不全.可以通过组件安装进行基本功能恢复 ...

  4. Determining the Size of a Class Object---sizeof(class)---By Girish Shetty

    There are many factors that decide the size of an object of a class in C++. These factors are: Size ...

  5. [转](译)KVO的内部实现

    转载自:http://www.cocoachina.com/applenews/devnews/2014/0107/7667.html   09年的一篇文章,比较深入地阐述了KVO的内部实现.   K ...

  6. 图论 竞赛图(tournament)学习笔记

    竞赛图(tournament)学习笔记 现在只是知道几个简单的性质... 竞赛图也叫有向完全图. 其实就是无向完全图的边有了方向. ​ 有一个很有趣的性质就是:一个tournament要么没有环,如果 ...

  7. 为什么sudo执行命令还是会提示权限不够

    安装openstack 的过程中需要执行以下命令,虽然使用了sudo,但是依然提示权限不够 $ sudo echo "deb http://ubuntu-cloud.archive.cano ...

  8. ajax 常用格式

    $.ajax({ url: "/", //请求路径 type: "post",//请求方式 data: "json", //发送请求的数据格 ...

  9. [原创]PHP 异常错误处理

    目录 错误与异常 异常类 错误类(PHP >= 7) 错误 错误报告级别 错误报告设置 全局异常处理程序 全局错误处理函数 无法捕获的错误类型 范例代码 开发/生产环境处理错误和异常 开发环境 ...

  10. 【Python】子域名查询脚本

    脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...