MVC+Ajax实现上传图片并保存路径到数据库

 ----View----

<form action="/commodity/FileUpLoad" method="post" enctype="multipart/form-data">

<td>照片:</td>

            <td>

                <input id="file" type="file" name="file" onchange="uploadImg()" />

                <input id="avatar" type="hidden" name="avatar" />

                <img src="" alt="" id="avatarShow" width="100" height="100" />

            </td>
</form>


<script>

//图片上传

    function uploadImg() {

        var formData = new FormData();

        formData.append("file", $("#file")[0].files[0]);

        $.ajax({

            url: "/commodity/FileUpLoad",

            type: 'POST',

            data: formData,

            // 告诉jQuery不要去处理发送的数据

            processData: false,

            // 告诉equerry不要去设置Content-Type请求头

            contentType: false,

            beforeSend: function () {//发送之前

                console.log("正在进行，请稍候");

            },

            success: function (data) {

                if (data != "") {

                    $("#avatarShow").attr("src", data);//图片路径

                } else {

                    console.log("上传失败");

                }

            },

            error: function (responseStr) {

                console.log("error");

            }

        });

    }

</script>
 

----Controllers----

        /// <summary>

        /// 上传图片

        /// </summary>

        /// <returns></returns>

        public string FileUpLoad()

        {

            HttpPostedFileBase img = Request.Files["file"];

            string p = "";

            //判断是否上传了图片

            if (img != null)

            {

                p = "/Content/imgs/"+Path.GetFileName(img.FileName);

                img.SaveAs(Server.MapPath(p));

            }

            return p;

        }