Asp.NET MVC4 + Ajax 实现多文件上传
本文转自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 实现多文件上传的更多相关文章
- [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...
- asp.NET 下真正实现大文件上传
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- 基于jquery ajax的多文件上传进度条
效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...
- asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)
上文件传很常见,现在就文件上传利用HTML的File控件(uploadify)的,这里为大家介绍一下(uploadify)的一些使用方法.在目前Web开发中用的比较多的,可能uploadify(参考h ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- ASP.NET CORE RAZOR :将文件上传至 ASP.NET Core 中的 Razor 页面
本部分演示使用 Razor 页面上传文件. 本教程中的 Razor 页面 Movie 示例应用使用简单的模型绑定上传文件,非常适合上传小型文件. 有关流式传输大文件的信息,请参阅通过流式传输上传大文件 ...
- ASP.NET知识总结(5.文件上传 文件下载)
5.文件上传 ->说明:使用http协议只适合传输小文件,如果想传递大文件,则需要使用插件或者客户 端程序(使用ftp协议) ->客户端操作 <1>为表单添加属性:encty ...
随机推荐
- Eclipse搭建Android开发环境(安装ADT,Android4.4.2)
1.检查是否安装JDK, 如果没安装请下载安装 JDK官网http://www.Oracle.com/technetwork/Java/javase/downloads/index.html 2.下载 ...
- linux密码修改实验
1.在单用户模式下进行引导 在不同的运行级别中,一个重要的运行级别就是单用户模式(运行级别1),该模式中,只有一个系统管理员使用特定的机器,而且尽可能少地运行系统服务,其中包含登录.单用户模式对少数管 ...
- Docker 下系统日志恢复
众所周知,docker 是一款进程级虚拟机.上文我们已经分析解释了该如何使用,本文针对日志消失问题进行恢复与解释. Docker 可以理解为阉割版的系统,内部功能不全.可以通过组件安装进行基本功能恢复 ...
- 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 ...
- [转](译)KVO的内部实现
转载自:http://www.cocoachina.com/applenews/devnews/2014/0107/7667.html 09年的一篇文章,比较深入地阐述了KVO的内部实现. K ...
- 图论 竞赛图(tournament)学习笔记
竞赛图(tournament)学习笔记 现在只是知道几个简单的性质... 竞赛图也叫有向完全图. 其实就是无向完全图的边有了方向. 有一个很有趣的性质就是:一个tournament要么没有环,如果 ...
- 为什么sudo执行命令还是会提示权限不够
安装openstack 的过程中需要执行以下命令,虽然使用了sudo,但是依然提示权限不够 $ sudo echo "deb http://ubuntu-cloud.archive.cano ...
- ajax 常用格式
$.ajax({ url: "/", //请求路径 type: "post",//请求方式 data: "json", //发送请求的数据格 ...
- [原创]PHP 异常错误处理
目录 错误与异常 异常类 错误类(PHP >= 7) 错误 错误报告级别 错误报告设置 全局异常处理程序 全局错误处理函数 无法捕获的错误类型 范例代码 开发/生产环境处理错误和异常 开发环境 ...
- 【Python】子域名查询脚本
脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...