MVC 手机端页面使用标签file 图片上传到后台处…

2018-06-22 06:02:36来源：未知阅读 ()

最近刚做了一个头像上传的功能，使用的是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 = "" });
            }
        }