前台：首先要导入jQuery

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
function SubFile() {
var fileUpload = $("#fupload").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
var baseUrl = "/Default/UploadFile" + "?r=" + Math.random();
$.ajax({
url: baseUrl,
type: "POST",
data: data,
contentType: false,
processData: false,
success: function (result) {
alert(result);
},
error: function (err) {
alert("出现错误：" + err.statusText)
}
});
}

function UpSubFile() {
$("#fupload").click();
}
</script>
</head>
<body>
<div>
单文件上传：
<input type="file" id="fupload" style="display:none" onchange="SubFile()" />
<input type="button" value="上传" onclick="UpSubFile()" />

多文件上传：
<input type="file" multiple id="fuploadMult" onchange="SubFile()" />

</div>
</body>
</html>

后台：

[HttpPost]
public string UploadFile()
{
try
{
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
foreach (string item in files)
{
HttpPostedFile file = files[item];
var fileName = Path.GetFileName(file.FileName);
var filePath = "/Content/UploadFile";

string newFileName = Guid.NewGuid().ToString() + fileName;

file.SaveAs(Server.MapPath(Path.Combine(filePath, newFileName)));
}

return "OK";
}
catch (Exception ex)
{
return ex.Message;
}
}

MVC Ajax上传文件的更多相关文章

  1. asp.net MVC ajax上传文件

    普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...

  2. MVC ajax 上传文件

    废话不多说,上代码: 用到的js文件: jquery.min.js jquery.easyui.min.js <input id="fileurl" onclick=&quo ...

  3. C# MVC ajax上传 文件

    用普通的ajax提交表单的时候,不能把文件流传到后端去,所以要用到jquery.form.js jquery.form.js到官网下载或者从这里下载:http://pan.baidu.com/s/1c ...

  4. spring mvc + ajax上传文件，页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  5. .net mvc ajax 上传文件

    1.前端 <div> <input type="file" id="upfile" /> <button type="b ...

  6. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  7. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  8. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  9. 关于Extjs MVC模式上传文件的简单方式

    Extjs新手研究上传文件的事情估计是件很头痛的问题,毕竟,我就在头痛.最近两天一直在忙文件上传问题,终于小有收获. 用的是Extjs+MVC3.0+EF开发,语言为C#.前台window代码显示列内 ...

随机推荐

  1. Elemant-UI日期范围的表单验证

    Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可.但是官网的示例只有普通日期类型的验证,没有时间 ...

  2. day 23-1 类的命名空间、组合

    类的命名空间 类与对象命名空间 类里 可以定义两种属性 静态属性 动态属性 类中的静态变量 可以被对象和类调用对于不可变数据类型来说,类变量最好用类名操作对于可变数据类型来说,对象名的修改是共享的,重 ...

  3. 后端api规范说明文档

    我们此次后端api的实现主要是按照RESTful api规范来设计的,就是符合REST架构下设计api的规范.简单的来说REST结构就是:利用URL定位资源,用HTTP动词(GET,POST,PUT, ...

  4. TP5多模块开发

    一般的thinkphp框架一般都是单模块开发的,但有时候我们可能需要进行多模块开发,例如添加个后台管理的模块.这次给人讲课,在Tp多模块开发的配置上翻车,感觉很有必要总结下,话不多说,直接上干货. 总 ...

  5. Git初始配置和基本使用

    初次运行Git前的配置 本文是在安裝完git以后首先应做到一些配置,安装教程可以参考廖雪峰git教程 用户信息 当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址. 这样做很重要,因为每 ...

  6. spring-cloud-config-server分布式配置中心

    spring cloud config是一个基于http协议的远程配置实现方式.通过统一的配置管理服务器进行配置管理,客户端通过https协议主动的拉取服务的的配置信息,完成配置获取. spring ...

  7. 小米众筹新品---8H凉感慢回弹记忆绵枕 99元 上手开箱图

    在众目睽睽之下,商城终于成了杂货铺 众筹发布了第98期新品——8H凉感慢回弹记忆绵枕H1,售价为99元,主打舒适凉感,抗菌吸湿,三曲线护颈设计,3~5秒慢回弹. 本着程序员的读书历程:x 语言入门 — ...

  8. Python3学习笔记十三

    1.   css 老师的博客:http://www.cnblogs.com/yuanchenqi/articles/6856399.html 选择器:找到想要改变的标签 css的功能:渲染和布局 2. ...

  9. webpack分片chunk加载原理

    首先,使用create-react-app快速创建一个demo npx create-react-app react-demo # npx命令需要npm5.2+ cd react-demo npm s ...

  10. Trie for string LeetCode

    Trie build and search class TrieNode { public: TrieNode * next[]; bool is_word; TrieNode(bool b = fa ...