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;

        }