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();
        model = XmlHelper.XmlDeserialize<Model>(text, Encoding.UTF8);
    }
    catch (Exception ex)
    {
        throw  new Exception();
    }
    return Json(model, JsonRequestBehavior.AllowGet);
}

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

时间: 2024-12-03 02:47:24

Ajax异步上传文件的相关文章

解决ajax异步上传文件的问题

HTML: <form id="avater" name="formlist"> {{ csrf_field() }} <ul class="list-group container" style="width:50%"> <li class="list-group-item list" style="border-radius: 5px"> <

ajax异步上传文件之data参数----小哈学js

下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js内部程序 1 一.大约在32行 2 createUploadForm: function(id, fileElementId,data) 3 二.大约在47行 4 jQuery(form).appendTo('body');前添加一下代码 5 if (data) { 6 for (var i in

(H5)FormData+AJAX+SpringMVC跨域异步上传文件

最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/plugins/

简述三种异步上传文件方式

 很久没写过博客了! 上次写已经是去年的12月了,离现在也有足足三个月了.这几个月因为要搭建个人网站以及准备个人简历,包括最近要准备最近的各大公司的实习春招,很难抽时间来写博客,这次的异步文件上传我觉得是很有必要了解的,笼络了很多知识点,因此准备写一篇博客来巩固下. 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpReques

异步上传文件多种方式归纳

最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo. 1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

异步上传文件并获得返回值(完全跨域)

http://blog.csdn.net/lrz1011/article/details/7913992 异步上传文件并获得返回值(完全跨域)AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策. Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件. <form>表单可以进行跨域数据和文件的上传,但却会使页面跳转. 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下: 原理: 将<form>表单通过一个iframe来submit,也就是

Jquery_异步上传文件多种方式归纳

1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

springmvc异步上传文件

前提条件 注意:bean的id名不能改变 <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSi

spingMVC异步上传文件

框架是个强大的东西,一般你能想到的,框架都会帮你做了,然后只需要会用就行了,spingmvc中有处理异步请求的机制,而且跟一般处理请求的方法差别不大,只是多了一个注解:spingmvc也可以将string.list.map转化成json数据:然后前台发起一个ajax请求,后台处理完成返回json数据,这就是异步上传文件的基本思路. 1.springMVC处理异步请求配置 首先是需要的jar包资源 上传文件的jar: commons-fileupload-1.2.2.jar commons-io-