【ASP.NET MVC】Ajax提交表单

下面这段代码主要有几个特点:

  1、Ajax提交表单

  2、表单中有一个<input type="file"/>

  3、当选择完图片后,利用AJAX提交表单,并在执行成功后返回图片路径,实现预览图片

<script type="text/javascript">

    $(document).ready(function () {
        var form = $("#form1");
        $("#file1").change(function () {
            $("#form1").ajaxSubmit({
                success: function (msg) { alert(msg); $("#img1").attr("src", msg); }
            });
        });
    });

</script>

<form id="form1" action="/Home/aa" method="post"  enctype="multipart/form-data" >
    <input type="file" name="file" onchange="up()" id="file1" />
    <img  alt="img" id="img1" />
</form>

控制器代码:

//这里只是为了实现效果,没有进行任何验证和处理
public ContentResult aa()
        {
            HttpPostedFileBase file = Request.Files["file"];
            string path = "/Content/"+ System.IO.Path.GetFileName(file.FileName);
            file.SaveAs(Path.Combine(Server.MapPath("~/Content"),Path.GetFileName(file.FileName)));
            return Content(path);
        }

代码狠简单,相信初学者很容易看懂。

posted @ 2013-11-30 22:33  YoMe  阅读(900)  评论(1编辑  收藏  举报