MVC 手機端頁面 使用標簽file 圖片上傳到后台處理

    最近剛做了一個頭像上傳的功能，使用的是H5 的界面，為了這個功能搞了半天的時間，找了各種插件，有很多自己都不知道怎么使用，后來只是使用了一個標簽就搞定了；如果對樣式沒有太大的要求我感覺使用這個就足夠了；下面來說一下實現的思路和方法。

  

這個是我最初想做的一個樣式；由於時間和精力的原因放棄了，做了一個下面的樣式

哈哈 這是原始的樣式沒有做過任何的修改，不過看着還行，因為這個標簽是調用的手機系統自己的插件和樣式

下面就一步一步的寫一下實現方式：

第一步HTML 標簽的

 <label class="section_label">頭像</label>
                <span class="section_right">
                  
                        <img src="~/Content/images/icon_head.png" alt="1" height="60px" />                      
                 

                    @using (Html.BeginForm("uploadHead", "MemberInfo", FormMethod.Post, new { ID = "user_head_form", enctype = "multipart/form-data" }))
                    {
                        <input type="file" name="head" accept="image/*" class="filebtn" id="headUpdate" style="display:none;" />

                    }

                </span>

<input type="file" name="head" accept="image/*" class="filebtn" id="headUpdate" style="display:none;" /> 這個就是圖片上傳的標簽；
實現思路：點擊 img 標簽的時候 觸發 input file 標簽 彈出選擇圖片框，選擇完圖片后實現圖片上傳步驟；

第二步： 點擊 imag 觸發 input JS 代碼  在寫js 代碼之前需要引用一個jquery-form.js文件，實現submit 提交之后接受返回的JSON數據

//上傳圖片
        $("#headImage").click(function(){
            upload();
        });
        function upload(){
            $("#headUpdate").click();
            $("#headUpdate").unbind().change(function(){
                //$("#user_head_form").submit();

                $("#user_head_form").ajaxSubmit({
                    url:'@Url.Action("uploadHead")',
                    type:"post",
                    dataType:"json",
                    success:function(json){
                        if (json.Success) {
                            $("#headImageURL ").attr("src",json.Path);
                        }else{
                            alert(json.Msg);
                        }
                    }
                });

            })
        }

第三步：后台的處理  將圖片上傳到后台，后台可以圖片上傳的服務器，或者保存到本地都可以操作；我是直接將圖片轉為byte 類型的 直接傳到接口服務器上了

[HttpPost]
        public ActionResult uploadHead()
        {
            try
            {
                MemberBLL mb = new MemberBLL();
                MoPhoto mp = new MoPhoto();
                HttpPostedFile file = System.Web.HttpContext.Current.Request.Files[0];

                if ((file == null))
                {
                    return Json(new { Success = false, Msg = "上傳圖片失敗", Path = "" });
                }
                else
                {
                    System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream);

                    MemoryStream ms = new MemoryStream();
                    image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

                    byte[] byteData = new byte[ms.Length];
                    ms.Position = 0;
                    ms.Read(byteData, 0, byteData.Length);
                    ms.Close();
                    image.Dispose();

                    //修改頭像
                    mp = mb._UpdateHeadPortrait(new MoHeadPortraitRequest()
                    {
                         JSJID = this.LoginModel.JSJID,
                         HeadPorTraitByte = byteData

                    });

                    return Json(new { Success =  mp.BaseResponse.IsSuccess, Msg = mp.BaseResponse.ErrorMessage, Path = mp.PhotoPath });
                }
            }
            catch (Exception)
            {
                return Json(new { Success = false, Msg = "上傳圖片失敗", Path = "" });
            }
        }

 

ok,這樣就可以輕松的實現了 手機端頭像的上傳功能了；第一張的圖片的實現效果，希望哪位大神們有實例或者資料給我提供一下，相互學習嘛。謝謝