需要引用js jquery.form

前端代码

<form action="/Save" id="mainForm" method="post" enctype="multipart/form-data">
<div class="portlet-body form-horizontal form-bordered form-row-stripped">
<div class="row-fluid">
<div class="control-group">
导入文件:<input type="file" name="FilePath" class="file" id="fileField">
</div> </div>
</div>
<div class="form-actions navbar-fixed-bottom">
<button id="submit" type="submit" class="btn blue"><i class="icon-ok"></i>提交</button>
</div>
</form>
<script src="/Content/Scripts/jquery.form.js"></script>
<script>
$(function() {
$("#mainForm").attr("enctype", "multipart/form-data"); $("#fileField").on("change", function() {
$("#mainForm").attr("action", "/ImportFile");
$('form').ajaxSubmit({
success: function(data) {
if (data) {
//todo
} else {
alert("解析文件异常,请检查上传文件");
}
$("#mainForm").attr("action", "/Save");
},
});
});
});
</script>

后端代码

[HttpPost]
public JsonResult ImportFile(FormCollection collection)
{
object model = null;
try
{
HttpPostedFileBase fostFile = Request.Files["FilePath"];
Stream streamfile = fostFile.InputStream; var reader = new StreamReader(streamfile);
string text = reader.ReadToEnd();
//解析文件,文件内容是XML
model = XmlHelper.XmlDeserialize<Model>(text, Encoding.UTF8);
}
catch (Exception ex)
{
throw new Exception();
}
return Json(model, JsonRequestBehavior.AllowGet);
}

这样上传文件的问题就解决了。

Ajax 异步上传文件的更多相关文章

  1. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  4. ajax异步上传文件FormDate方式,html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  5. 使用ajax异步上传文件或图片(配合php)

    //html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...

  6. 使用Ajax异步上传文件

    之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...

  7. ajax异步上传文件之data参数----小哈学js

    下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...

  8. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  9. (H5)FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

随机推荐

  1. Java中的多线程Demo

    一.关于Java多线程中的一些概念 1.1 线程基本概念 从JDK1.5开始,Java提供了3中方式来创建.启动多线程: 方式一(不推荐).通过继承Thread类来创建线程类,重写run()方法作为线 ...

  2. windows下安装Redis并部署成服务

    windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...

  3. web安全色

    web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...

  4. 优化UI控件 【译】

    翻译自:https://unity3d.com/cn/learn/tutorials/topics/best-practices/optimizing-ui-controls?playlist=300 ...

  5. 深入浅出node.js

    http://www.infoq.com/cn/articles/what-is-nodejs/

  6. Kafka官方文档

    Apache Kafka是 一个分布式消息发布订阅系统.它最初由LinkedIn公司基于独特的设计实现为一个分布式的提交日志系统( a distributed commit log),,之后成为Apa ...

  7. 浅析SQL Server数据库中的伪列以及伪列的含义

    SQL Server中的伪列 下午看QQ群有人在讨论(非聚集)索引的存储,说,对于聚集索引表,非聚集索引存储的是索引键值+聚集索引键值:对于非聚集索引表,索引存储的是索引键值+RowId,这应该是一个 ...

  8. 智能指针剖析(下)boost::shared_ptr&其他

    1. boost::shared_ptr 前面我已经讲解了两个比较简单的智能指针,它们都有各自的优缺点.由于 boost::scoped_ptr 独享所有权,当我们真真需要复制智能指针时,需求便满足不 ...

  9. 也许是目前实现最好的js模拟滚动插件

    finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...

  10. ar1220f-s四条拨号光纤做的策略路由实现负载均衡

    acl number 3001  //内网数据流不需被重定向到外网出口. rule 5 permit ip source 192.168.0.0 0.0.255.255  destination 19 ...