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. 首先看下上传页 ...
随机推荐
- 没有理由,就是要上一波C++的东西
从入门开始,一直在用C , 对于C++可谓是一窍不通,只能是勉强看懂C++的代码,至于写更是连头文件什么iostream是什么我都不知道,更不用说什么using namespace std :之类的东 ...
- stl_alloc.h分配器
五.分配器:5.1.头文件: 5.1.1.include<stl_alloc.h> //内存的分配. 5.1.2.include<stl_construct.h> //对象的构 ...
- Linux Bootup Time
Linux Bootup Time 英文原文地址:http://elinux.org/Boot_Time 1. 简介 启动时间这一话题包括很多子话题,比如启动时间的衡量.启动时间的分析.人为因素分 ...
- description方法的介绍及重写
Dog *d = [Dog new]; //查看对象地址 NSLog(@"\n d= %p ",d);//打印的为地址 例:0x1001002e0 //查看对象实例变量的值 NSL ...
- LNMP之编译安装PHP出现的问题
2010年以前,互联网公司最常用的Web服务组合就是LAMP(即Linux.Apache.MySQL.PHP),近几年随着Nginx Web服务的逐渐流行,又出现了新的Web服务环境组合--LNMP ...
- (坑)django test在多线程下的问题
问题描述: 使用django自带的test做测试,尝试去数据库中取数据,主线程中没有问题,非主线程中取不到数据. 示例代码: class MyTestCase(TestCase): def setUp ...
- spring-boot整合dubbo:Spring-boot-dubbo-starter
为什么要写这个小工具 如果你用过Spring-boot来提供dubbo服务,相信使用中有很多"不爽"的地方.既然使用spring boot,那么能用注解的地方绝不用xml配置,这才 ...
- Micro 架构与设计
Micro 架构与设计 翻译自 Micro architecture & design patterns for microservices 注: 原文作者即 Micro 框架的开发者. 过去 ...
- Struts2中的JSON问题——后台返回JSON字符串到前台
最近做一个项目遇到一个比较棘手的问题,项目后台采用struts2+Hibernate3+Spring3,前台采用ExtJs4.笔者目前仍是一名大二学生吗,后台框架完全是毫无任何基础,从零学,现学现用. ...
- OBS实现直播解决方案【html实现直播】
项目的需要,要整一个视频直播,但又不想在其他平台那种直播室盗链展示,那我就直接用播放器来实现rtmp流媒体服务器推流吧!没废话,走起 1.你要有一个媒体服务器,暂时用[盘古云],这个还好,算是不错的平 ...