首页 > 安全资讯 >

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

16-08-13

MVC 手机端页面 使用标签file 图片上传到后台处理 最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签

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

 

 

这个是我最初想做的一个样式;由于时间和精力的原因放弃了,做了一个下面的样式

 

 

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

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

第一步HTML 标签的


                
                  
                        1                      
                 

                    @using (Html.BeginForm("uploadHead", "MemberInfo", FormMethod.Post, new { ID = "user_head_form", enctype = "multipart/form-data" }))
                    {
                        

                    }

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

相关文章
最新文章
热点推荐