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

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

新老客户大回馈,云服务器低至5折

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

 



 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做

下一篇:微信公众号支付(提供MVC版本)