需要引用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. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  2. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  3. 纯净CentOS7.2 yum源配置与使用yum 安装系统工具net-tools

    本节我们来讲CentOS 的yum 源配置 一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器 ...

  4. linux服务器性能(网卡流量、CPU、内存、磁盘使用率)监控

    广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...

  5. ActiveXObject函数详解(转自http://eyesinthesky.iteye.com/blog/1560033)

    什么是 ActiveX 控件? ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容.在某些情况下,这些程 ...

  6. hdu1312 Red and Black 简单BFS

    简单BFS模版题 不多说了..... 直接晒代码哦.... #include<cstdlib> #include<iostream> #include<cstdio> ...

  7. HTML head头部标签总结

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...

  8. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  9. 通过rpm 安装MYSQL

    1.MYSQL Server端安装: 2.MYSQL client 安装 3.设置MYSQL密码(安装了MySql客户端才可以执行) ' 4.登录MYSQL mysql 的最简单的安装方法啦

  10. Vuejs实例-02Vue.js项目集成ElementUI

    Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网 ...