牛骨文教育服务平台(让学习变的简单)
博文笔记

MVC使用ajax方法提交表单(一)

创建时间:2017-04-14 投稿人: 浏览次数:1649

目前我常用的方式有两种,这次先介绍第一种,利用formData进行传递:
使用formData进行传递,好处是可以传递文件和图片,而且使用起来也十分方便。
在control控制界面中,我把接收图片及另存为的代码也附上。
下面是js代码

function doUpload() {
        var formData = new FormData($("#form1")[0]);  // 要求使用的html对象
        $.ajax({
            url: "http://localhost:6751/Home/AjaxAddUser",
            type: "POST",
            data: formData,
            async: true,
            // 下面三个参数要指定,如果不指定,会报一个JQuery的错误 
            cache: false,
            contentType: false,
            processData: false,
            success: function (msg) {
                alert(msg);
                window.location.href = "/Home/Index";
            },
            error: function (msg) {
                alert(msg);
            }
        });
    }

控制器的接收代码

[HttpPost]
        public string AjaxAddUser(FormCollection form, HttpPostedFileBase File1)
        {
            string name = form["name"];
            int age = int.Parse(form["age"]);
            DateTime date = System.DateTime.Now;
            var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(File1.FileName));
            File1.SaveAs(fileName);
            string path = "/Upload/" + Path.GetFileName(File1.FileName);

            UserList u = new UserList();
            u.name = name;
            u.age = age;
            u.jointime = date;
            u.Url = path;
            //添加,这个只是在内存上操作
            db.UserList.AddObject(u);
            //保存到数据库
            int ac = 0;
            string msg;
            ac = db.SaveChanges();
            if (ac > 0)
            {
                msg = "ok";
            }
            else
            {
                msg = "no";
            }
            //return Json(new { options = msg }, JsonRequestBehavior.AllowGet);
            return msg;
        }

也可以利用formdata先实现图片的上传,然后在页面中直接预览文件,这样用户在上传之后就可以看到自己上传的图片效果,用户体验更好。具体代码很简单,我就不举例了。

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。