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. 首先看下上传页 ...
随机推荐
- Fill-rate, Canvases and input 【译】
翻译自https://unity3d.com/cn/learn/tutorials/topics/best-practices/fill-rate-canvases-and-input?playlis ...
- JVM 堆内存,参数优化
Java堆内存 http://www.importnew.com/19593.html JVM诊断之查看运行参数 JVM 垃圾回收器工作原理及使用实例介绍 https://www.ibm.com/de ...
- Android NDK开发之从Java与C互调中详解JNI使用(一)
生活 这一个礼拜过得真的是苦不堪言,上周因为打球脚踝直接扭伤,肿的想猪蹄一样,然后休息几天消肿了,可以缓慢龟速的行走了,然而五一回来上班第一天,上班鞋子还能穿上,下班脚已插不进鞋子里面了,好吧,又肿回 ...
- Docker - 生成镜像
利用docker commit命令生成镜像 Docker镜像是多层存储,每一层是在前一层的基础上进行的修改.而容器是镜像为基础层的多层存储. 如果不使用数据卷,运行一个容器的时候,对任何文件的修改都会 ...
- zabbix安装配置
实验环境 主机名 操作系统版本 IP地址 安装软件 console CentOS 7.0 114.55.29.246 Httpd.Nginx.MySQL.Zabbix log1 CentOS 7.0 ...
- 运用三角不等式加速Kmeans聚类算法
运用三角不等式加速Kmeans聚类算法 引言:最近在刷<数据挖掘导论>,第九章, 9.5.1小节有提到,可以用三角不等式,减少不必要的距离计算,从而达到加速聚类算法的目的.这在超大数据量的 ...
- hdu1556 Color the ball 简单线段树
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1556 简单的线段树的应用 直接贴代码了: 代码: #include<iostream> # ...
- NancyFx 2.0的开源框架的使用-Stateless(二)
继续上一篇Stateless的博文,在上一篇的博文的基础上稍微加点东西 接下来右键解决方案添加新项目,一样建一个空的Web项目 然后在StatelessDemoWeb项目里面添加Views文件夹,Sc ...
- 谈谈我的session跨域处理方法
情景:公司的一个网站有一个模块(测试模块)需要单独用另外的一个域名(www.btest.com)去访问,即网站需要用两个不同的域名去访问,如首页(www.abc.com)和测试模块(www.xyz.c ...
- JAVA CyclicBarrier类详解
一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时CyclicBarrie ...