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. 首先看下上传页 ...
随机推荐
- spine动画融合与动画叠加
spine动画融合与动画叠加 一.动画融合setMix 1.概述:两个动作之间的平滑过渡 参数duration为需要多少时间从fromAnimation过渡到toAnimation,过渡时间为动画重叠 ...
- Git操作指南
请访问以下网址,很详细,今天偷个懒记录一下,之后有时间再来补全吧! https://git-scm.com/book/zh/v2
- Understanding a Kernel Oops!
Understanding a kernel panic and doing the forensics to trace the bug is considered a hacker's job. ...
- 阿里云CentOS7.2服务器的安装
第一步:下载服务器系统ISO安装文件 我使用的是阿里云的镜像:因为阿里云的服务在国内相对比较成熟 服务器镜像下载如下:http://mirrors.aliyun.com/centos/7/isos/x ...
- 【Android Widget】FragmentTabHost
android.support.v4包里面提供了FragmentTabHost用来替代TabHost,FragmentTabHost内容页面支持Fragment,下面我们就通过示例来看他的用法 效果图 ...
- hdu2089 不要62 我的第一个数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位DP的入门题,我是根据kuangbin的博客写出来的 思路: dp[i][0],表示长度为i ...
- Visual Studio Code for mac
Visual Studio Code for mac 将下载文件解压拖到应用程序文件夹即可 下载地址:链接: https://pan.baidu.com/s/1geHL5f1 密码: 2fdw
- asp.net已流的方式下载文件
string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...
- 开涛spring3(2.1) - IoC基础
2.1.1 IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在 ...
- 项目中的报错信息,maven报错等的总结
Maven是一个自动化的构建和管理工具.在项目开发中,如果遇到了错误(红叉),一般有如下的解决方法: 1.java.lang.UnsatisfiedLinkError: E:\apache-tomca ...