你的位置:首页 > ASP.net教程

[ASP.net教程]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,这样就可以轻松的实现了 手机端头像的上传功能了;第一张的图片的实现效果,希望哪位大神们有实例或者资料给我提供一下,相互学习嘛。谢谢