需要引用js jquery.form

前端代码

  1. <form action="/Save" id="mainForm" method="post" enctype="multipart/form-data">
  2. <div class="portlet-body form-horizontal form-bordered form-row-stripped">
  3. <div class="row-fluid">
  4. <div class="control-group">
  5. 导入文件:<input type="file" name="FilePath" class="file" id="fileField">
  6. </div>
  7.  
  8. </div>
  9. </div>
  10. <div class="form-actions navbar-fixed-bottom">
  11. <button id="submit" type="submit" class="btn blue"><i class="icon-ok"></i>提交</button>
  12. </div>
  13. </form>
  14. <script src="/Content/Scripts/jquery.form.js"></script>
  15. <script>
  16. $(function() {
  17. $("#mainForm").attr("enctype", "multipart/form-data");
  18.  
  19. $("#fileField").on("change", function() {
  20. $("#mainForm").attr("action", "/ImportFile");
  21. $('form').ajaxSubmit({
  22. success: function(data) {
  23. if (data) {
  24. //todo
  25. } else {
  26. alert("解析文件异常,请检查上传文件");
  27. }
  28. $("#mainForm").attr("action", "/Save");
  29. },
  30. });
  31. });
  32. });
  33. </script>

后端代码

  1. [HttpPost]
  2. public JsonResult ImportFile(FormCollection collection)
  3. {
  4. object model = null;
  5. try
  6. {
  7. HttpPostedFileBase fostFile = Request.Files["FilePath"];
  8. Stream streamfile = fostFile.InputStream;
  9.  
  10. var reader = new StreamReader(streamfile);
  11. string text = reader.ReadToEnd();
    //解析文件,文件内容是XML
  12. model = XmlHelper.XmlDeserialize<Model>(text, Encoding.UTF8);
  13. }
  14. catch (Exception ex)
  15. {
  16. throw new Exception();
  17. }
  18. return Json(model, JsonRequestBehavior.AllowGet);
  19. }

这样上传文件的问题就解决了。

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. spine动画融合与动画叠加

    spine动画融合与动画叠加 一.动画融合setMix 1.概述:两个动作之间的平滑过渡 参数duration为需要多少时间从fromAnimation过渡到toAnimation,过渡时间为动画重叠 ...

  2. Git操作指南

    请访问以下网址,很详细,今天偷个懒记录一下,之后有时间再来补全吧! https://git-scm.com/book/zh/v2

  3. Understanding a Kernel Oops!

    Understanding a kernel panic and doing the forensics to trace the bug is considered a hacker's job. ...

  4. 阿里云CentOS7.2服务器的安装

    第一步:下载服务器系统ISO安装文件 我使用的是阿里云的镜像:因为阿里云的服务在国内相对比较成熟 服务器镜像下载如下:http://mirrors.aliyun.com/centos/7/isos/x ...

  5. 【Android Widget】FragmentTabHost

    android.support.v4包里面提供了FragmentTabHost用来替代TabHost,FragmentTabHost内容页面支持Fragment,下面我们就通过示例来看他的用法 效果图 ...

  6. hdu2089 不要62 我的第一个数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位DP的入门题,我是根据kuangbin的博客写出来的 思路: dp[i][0],表示长度为i ...

  7. Visual Studio Code for mac

    Visual Studio Code for mac 将下载文件解压拖到应用程序文件夹即可 下载地址:链接: https://pan.baidu.com/s/1geHL5f1 密码: 2fdw

  8. asp.net已流的方式下载文件

    string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...

  9. 开涛spring3(2.1) - IoC基础

    2.1.1  IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在 ...

  10. 项目中的报错信息,maven报错等的总结

    Maven是一个自动化的构建和管理工具.在项目开发中,如果遇到了错误(红叉),一般有如下的解决方法: 1.java.lang.UnsatisfiedLinkError: E:\apache-tomca ...