1、下载ajaxfileupload.js

2、在控制器内创建如下方法

        //文件上传
public ActionResult uploadFile(HttpPostedFileBase file)
{
if (file == null)
{
return Json(new { result = "false", errorMsg="文件不存在" }, "text/html");
} string fileName = "~/UploadFiles/" + DateTime.Now.ToString("yyyyMMddHHssmm") + Path.GetFileName(file.FileName);
var physicsFileName = Server.MapPath(fileName);
try
{
file.SaveAs(physicsFileName);
return Json(new { result = "true", imgUrl = fileName }, "text/html");
}
catch(Exception ex)
{
return Json(new { result = "false", errorMsg = ex.Message }, "text/html");
}
}

3、在前端编写如下JS,需要引入JQuery和ajaxfileupload.js

    <script type="text/javascript">
function ajaxFileUploads() {
$("#loading").ajaxStart(function () {
$(this).show();
}).ajaxComplete(function () {
$(this).hide();
}); $.ajaxFileUpload({
url: '/User/uploadFile', //后台处理的 - Controller/Action
secureuri: false,
fileElementId: 'fileToUpload', //上传文件的Name属性
dataType: 'json',
type: 'post',
success: function (data, status) {
alert(data.result);
if (data.result === "true") { //成功后把后台文件路径赋值给异常控件,便于一起提交给后台
alert(data.imgUrl);
$(".imgUrl").val(data.imgUrl);
} else if (data.result === "false") {
alert(data.errorMsg);
}
},
error: function (data, status, e) {
alert(e);
}
})
return false;
} $(document).ready(function () {
$(".btnUpload").click(function () {
ajaxFileUploads();
});
});
</script>

4、View中的代码

    <div>
个人头像:@Html.HiddenFor(m => m.imgUrl, new { @class = "imgUrl" }) //强类型绑定
<input type="file" id="fileToUpload" name="file" /><input type="button" class="btnUpload" value="上传" /> //上传控件和上传按钮
<span id="loading" style="display: none;">请等待</span> //等待提示
</div>

  

asp.net MVC4 异步文件上传的更多相关文章

  1. iOS开发之结合asp.net webservice实现文件上传下载

    iOS开发中会经常用到文件上传下载的功能,这篇文件将介绍一下使用asp.net webservice实现文件上传下载. 首先,让我们看下文件下载. 这里我们下载cnblogs上的一个zip文件.使用N ...

  2. HTML5——摒弃插件和前端框架的异步文件上传

    之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...

  3. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  4. ASP.NET中的文件上传大小限制的问题

    一.文件大小限制的问题 首先我们来说一下如何解决ASP.NET中的文件上传大小限制的问题,我们知道在默认情况下ASP.NET的文件上传大小限制为2M,一般情况下,我们可以采用更改WEB.Config文 ...

  5. Asp.net mvc 大文件上传 断点续传

    Asp.net mvc 大文件上传 断点续传 进度条   概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...

  6. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  7. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  8. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  9. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

随机推荐

  1. 由一个bug引发的SQLite缓存一致性探索

    问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...

  2. tcpdump、nc网络工具使用

    tcpdump: 网络嗅探器 nc: nmap: 端口扫描 混杂模式(promisc) C设置为监控,当A和B通信,C是无法探测到数据的,除非有交换机的权限,将全网端口的数据通信都发送副本到C的端口上 ...

  3. spi子系统之驱动SSD1306 OLED

    spi子系统之驱动SSD1306 OLED 接触Linux之前,曾以为读源码可以更快的学习软件,于是前几个博客都是一边读源码一边添加注释,甚至精读到每一行代码,实际上效果并不理想,看过之后就忘记了.主 ...

  4. [原创]最近使用React-Native的适配问题和警告搜集

    主要记录一下最近使用RN 0.29.2版本遇到的适配的坑以及部分警告的解法. 适配类: 安卓输入框圆角.边框颜色.粗细等无法设置成功,需要在TextInput外面新增一个View设置圆角,TextIn ...

  5. spring3系列一

    IOC基础 Ioc是什么 Ioc--Inversion of Control 控制反转,不是什么技术,而是一种设计思想.在java开发中,ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对 ...

  6. NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实 ...

  7. LZ77压缩算法编码原理详解(结合图片和简单代码)

    前言 LZ77算法是无损压缩算法,由以色列人Abraham Lempel发表于1977年.LZ77是典型的基于字典的压缩算法,现在很多压缩技术都是基于LZ77.鉴于其在数据压缩领域的地位,本文将结合图 ...

  8. [LeetCode] Single Number 单独的数字

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  9. VS2015 使用及插件推荐

      环境搭建与插件推荐 Cpp in Win10 x64 vs2015 + Resharper/Visual Assist X vs2015Pro: Download or see BaiDu 中文专 ...

  10. ECharts学习(3)--toolbox(工具栏)

    1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...