快捷導(dǎo)航

ASP.NET?MVC+EntityFramework圖片頭像上傳功能實(shí)現(xiàn)

更新時(shí)間：2023年12月19日 09:39:03 作者：xinZhu8

這篇文章主要介紹了ASP.NET?MVC+EntityFramework圖片頭像上傳功能實(shí)現(xiàn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1，先展示一下整體的效果

2，接下來展示用戶添加以及上傳頭像代碼、添加用戶界面

前端代碼如下：

  <div class="form-group">
            @Html.LabelFor(model => model.img, "頭像：", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.EditorFor(model => model.img, new { htmlAttributes = new { @class = "form-control" } })*@
                <input class="width-main input" type="file" datatype="*" id="pic" name="pic" value="" accept="image/*" onchange="upload(event)">
                <input type="hidden" name="img" id="img" value="" />
                <div id="showImg"></div>
            </div>
        </div>

JS代碼

<script>
    //實(shí)現(xiàn)異步上傳
    function upload(event) {
        var imgPath = $("#pic").val();
        console.log(imgPath);
        //判斷上傳文件的后綴名
        var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
        if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') {
            alert("請選擇圖片文件");
            return;
        }
        //實(shí)現(xiàn)文件上傳操作
        if (event.target.files[0].type.search('image') !== -1) {
            //實(shí)現(xiàn)文件圖片的上傳
            var formData = new FormData($("#myForm")[0]);//用于創(chuàng)建一個(gè)文件流對(duì)象
            //formData.append('pic', $("#img")[0]); //添加文件流 （流名稱，流）
            //console.log(formData);
            $.ajax({
                url: "/Upload/file",
                type: "post",
                cache: false,
                processData: false,
                contentType: false,
                data: formData,
                success: function (res) {
                    console.log(res);
                    if (res.trim() == "209") {
                        alert("請選擇圖片！");
                        return;
                    }
                    if (res.trim() == "300") {
                        alert("上傳的圖片不能為空圖片！");
                        return;
                    }
                    if (res.trim() == "400") {
                        alert("上傳的圖片失??！");
                        return;
                    }
                    //alert("上傳成功！");
                    $("#showImg").html("<img src='" + res + "' width='50' height='50' /><p style='color:red;'>上傳成功！</p>");
                    //設(shè)置上傳的圖片地址
                    var res = res.trim(); //去除圖片的前后空白字符
                    $("#img").val(res);
                },
                error: function (res) {
                    alert("上傳異常！");
                }
            });
        } else {
            alert('只支持上傳圖片');
        }
    }
</script>

控制器圖片上傳的方法

  //圖片上傳
        [HttpPost]
        public ActionResult file(HttpPostedFileBase pic)
        {
            try
            {
                if (pic != null)
                {
                    if (pic.ContentLength == 0)
                    {
                        return Content("209"); //獲取上傳的圖片
                    }
                    else
                    {
                        //判斷文件的后綴名，是否符合條件
                        string backFix = Path.GetExtension(pic.FileName);
                        if (backFix != ".gif" && backFix != ".png" && backFix != ".jpg" && backFix != ".jpeg")
                        {
                            return Content("210"); //格式不對(duì)
                        }
                        string fileName = DateTime.Now.ToString("MMddHHmmss") + backFix;
                        string strPath = Server.MapPath("~/Content/pic/" + fileName);
                        pic.SaveAs(strPath);
                        //返回路徑
                        return Content("/Content/pic/" + fileName);
                    }
                }
                else
                {
                    return Content("300"); //圖片不能為空
                }
            }
            catch (Exception )
            {
                return Content("400"); //上傳失敗
            }
        }

數(shù)據(jù)庫保存的是文件的已經(jīng)重新命名的路徑，數(shù)據(jù)庫保存的圖片如下