【ASP.NET MVC】Ajax提交表单

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

　　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);
        }