Ajax 异步上传文件
需要引用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 异步上传文件的更多相关文章
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- Spring使用ajax异步上传文件
单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...
- ajax异步上传文件FormDate方式,html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
- 使用ajax异步上传文件或图片(配合php)
//html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...
- 使用Ajax异步上传文件
之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...
- ajax异步上传文件之data参数----小哈学js
下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...
- html5+php实现文件的断点续传ajax异步上传
html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
随机推荐
- 关联分析:FP-Growth算法
关联分析又称关联挖掘,就是在交易数据.关系数据或其他信息载体中,查找存在于项目集合或对象集合之间的频繁模式.关联.相关性或因果结构.关联分析的一个典型例子是购物篮分析.通过发现顾客放入购物篮中不同商品 ...
- JS模式--职责链模式
职责链模式的定义:使用多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链, 并沿着这条链条传递下去,直到有一个对象处理它为止. var order500 = f ...
- Angular2.js——主从结构
学习这一篇的内容,还回到我们快速起步的应用上来. 主从结构,我们想要做一个英雄的列表,我们希望用户在列表中选中一个英雄,然后这个被选中的英雄出现在详情视图中.主视图是英雄列表,从视图则是被选中英雄的详 ...
- 纯HTML课表
table标签构造课表 table标签常用于制作表格以及简单布局,于是我就玩了下table标签,用table标签也能构造出很漂亮的页面呢,虽然在博客页面加入与实际打开页面稍微有点出入,但还是可以接受的 ...
- BZOJ 1266: [AHOI2006]上学路线route
题目描述 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:"很 ...
- 金山助手流氓软件-被进程sjk_daemon.exe坑死
修改完Android工程代码,进入调试阶段时DDMS中报错:The connection to adb is down, and a severe error has occured. 由于之前也碰到 ...
- Android WebView导入HTML使Js生效的方法
WebSettings ws = webview.getSettings(); ws.setJavaScriptEnabled(true);//加上这句 webview.loadDataWithBas ...
- 与64位版本的Windows不兼容,masm运行不了
问题: 在Window64位运行不了的masm 解决方法: 1.下载DosBox0.74(当前最新): 2.安装后运行,运行后出现控制台: 3.在DosBox的控制台下运行 Mount x: x:/m ...
- routeProvider路由的使用
先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- 智能指针剖析(下)boost::shared_ptr&其他
1. boost::shared_ptr 前面我已经讲解了两个比较简单的智能指针,它们都有各自的优缺点.由于 boost::scoped_ptr 独享所有权,当我们真真需要复制智能指针时,需求便满足不 ...