Ajax异步上传文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
}

 

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

以上是关于Ajax异步上传文件的主要内容,如果未能解决你的问题,请参考以下文章

php+ajax实现异步上传文件或图片功能

Ajax异步上传文件

Ajax异步上传多个文件并返回文件路径

ajax异步上传图片文件并将其转换为base64格式

asp.net mvc  Ajax.BeginForm 异步上传图片的问题

文件的上传(表单上传和ajax文件异步上传)