星空网 > 软件开发 > ASP.net

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

    最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了;如果对样式没有太大的要求我感觉使用这个就足够了;下面来说一下实现的思路和方法。

   MVC  手机端页面 使用标签file 图片上传到后台处理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

哈哈 这是原始的样式没有做过任何的修改,不过看着还行,因为这个标签是调用的手机系统自己的插件和样式

下面就一步一步的写一下实现方式:

第一步HTML 标签的

 <label class="section_label">头像</label>        <span class="section_right">                     <img src='/images/loading.gif' data-original="~/Content/images/icon_head.png"  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,这样就可以轻松的实现了 手机端头像的上传功能了;第一张的图片的实现效果,希望哪位大神们有实例或者资料给我提供一下,相互学习嘛。谢谢

 



 




原标题:MVC 手机端页面 使用标签file 图片上传到后台处理

关键词:上传

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

一文帮你捋清Lazada物流方案及产品定价方式:https://www.ikjzd.com/articles/133390
Lazada2020年家居品类选品趋势分析:https://www.ikjzd.com/articles/133391
Lazada如何(逐个)批量上传产品完整版流程(下)-ASC产品批量创建:https://www.ikjzd.com/articles/133392
2020 Jumia BLACK FRIDAYS 开启!:https://www.ikjzd.com/articles/133393
不少卖家都想了解的shopify平台,究竟怎么样?:https://www.ikjzd.com/articles/133394
Noon的电商新招:启动VIP会员计划:https://www.ikjzd.com/articles/133395
美众议院对TikTok“动手”,下一步该怎么在TikTok上营销?:https://www.kjdsnews.com/a/1836587.html
速卖通在韩国争议不断,投诉量激增两倍:https://www.kjdsnews.com/a/1836588.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流