ajax接收后台数据库图片问题

js:
$("#system-user-img-responsive").attr(“src”, “data:image/png;base64,” + data.userAvatar);

$.ajax({
            url: "/Home/UserEdit",
            data: formData,
            type: "POST",
            dataType: "json",
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                alert("00");
                alert(data.isSuccess);
                switch (data.isSuccess) {
                    case 0:
                        alert("01");
                        document.getElementById("user-info-flashMessage").innerHTML = "用户名或邮箱被注册!";
                        document.getElementById("user-info-flashMessage").style.visibility = "visible";
                        setTimeout(function () {
                            document.getElementById("user-info-flashMessage").style.visibility = "hidden";
                        }, 3000);
                        break;
                    case 1:
                        document.getElementById("user-info-flashMessage").innerHTML = "修改成功!";
                        document.getElementById("user-info-flashMessage").style.visibility = "visible";
                        setTimeout(function () {
                            document.getElementById("user-info-flashMessage").style.visibility = "hidden";
                        }, 3000);
                        alert(data.userAvatar);
                        document.getElementById("")
                        userNameValue.innerHTML = data.userName;
                        mottoValue.innerHTML = data.userMotto;
                        emailValue.innerHTML = data.userEmail;
                        telValue.innerHTML = data.userTel;
                        addressValue.innerHTML = data.userAddress;
						
						//重点在这里
                       $("#system-user-img-responsive").attr("src", "data:image/png;base64," + data.userAvatar);
                        //document.getElementById("system-user-img-responsive").src = data.userAvatar;
                        document.getElementById("system-user-userName").innerHTML = data.userName;
                        document.getElementById("system-user-motto").innerHTML = data.userMotto;
                        break;
                    case 2:
                        document.getElementById("user-info-flashMessage").innerHTML = "网络错误,请稍后再试!";
                        document.getElementById("user-info-flashMessage").style.visibility = "visible";
                        setTimeout(function () {
                            document.getElementById("user-info-flashMessage").style.visibility = "hidden";
                        }, 3000);
                        break;
                    default:
                        break;
                }
            },
            error: function (e) {
                console.log(e);
            }
        });

后台:
String Avatar = BytesToBase64(objUser.UserAvatar);

public ActionResult UserEdit()
        {   
            HttpPostedFileBase userAvatarBase = Request.Files["userAvatar"];
            byte[] userAvatar = null;

            if (userAvatarBase != null)
            {
                userAvatar = ReadFileBytes(userAvatarBase);
            }

            User objUser = new User()
            {
                UserId = Convert.ToInt32(Session["userId"]),
                UserAvatar = userAvatar,
                UserName = Request.Form["userName"],
                UserMotto = Request.Form["userMotto"],
                UserEmail = Request.Form["userEmail"],
                UserTel = Request.Form["userTel"],
                UserAddress = Request.Form["userAddress"]
            };

            int saveUser = new UserService().UserSaveInfo(objUser);

            if (saveUser == 0)
            {
                return Json(new { isSuccess = 0 });
            }
            else if(saveUser == 1)
            {
                objUser = new UserService().GetUserInfo(objUser);

				//重点在这里
                //Image Avatar = BytesToImage(objUser.UserAvatar);
                String Avatar = BytesToBase64(objUser.UserAvatar);

                return Json(new {
                    isSuccess = 1,
                    userName = objUser.UserName,
                    userAvatar = Avatar,
                    userMotto = objUser.UserMotto,
                    userEmail = objUser.UserEmail,
                    userTel = objUser.UserTel,
                    userAddress = objUser.UserAddress
                    });
            }
            else
            {
                return Json(new { isSuccess = 2 });
            }
        }



        /// <summary>
        /// 将文件流转化为二进制字节
        /// </summary>
        /// <param name="fileData">图片文件流</param>
        /// <returns></returns>
        private byte[] ReadFileBytes(HttpPostedFileBase fileData)
        {
            byte[] data;
            using (Stream inputStream = fileData.InputStream)
            {
                MemoryStream memoryStream = inputStream as MemoryStream;
                if (memoryStream == null)
                {
                    memoryStream = new MemoryStream();
                    inputStream.CopyTo(memoryStream);
                }
                data = memoryStream.ToArray();
            }
            return data;
        }

        /// <summary>
        /// 把二进制字节转化为文件流
        /// </summary>
        /// <param name="bytes">图片字节</param>
        /// <returns></returns>
        public static Image BytesToImage(byte[] bytes)
        {
            MemoryStream ms = new MemoryStream(bytes);
            Image img = Image.FromStream(ms);
            return img;
        }

        /// <summary>
        /// 把二进制字节转化为base64
        /// </summary>
        /// <param name="bytes">图片字节</param>
        /// <returns></returns>
        public static String BytesToBase64(byte[] bytes)
        {
            String Base64Str = null;
            //先把字符串按照utf-8的编码转换成byte[] 
            //Encoding myEncoding = Encoding.GetEncoding("utf-8");
            //myByte中获得这样的字节数组:228,184,173,229,141,142,228,186,186,230,176,145,229,133,177,229,146,140,229,155,189
            //bytes = myEncoding.GetBytes(factString);
            //把byte[]转成base64编码,这个例子形成的base64编码的unicode等价字符串为:"5Lit5Y2O5Lq65rCR5YWx5ZKM5Zu9"
            Base64Str = Convert.ToBase64String(bytes);
            return Base64Str;
        }

一直报错的问题:

  1. Request-URI Too Long 414解决思路: 读取byte[]类型图片,先base64在后台转码,然后在ajax success回调函数中用$("#system-user-img-responsive").attr(“src”, “data:image/png;base64,” + data.userAvatar);这种方式对img标签进行赋值
  2. get 404,明明我用的post。…哎。使用byte[]转image时public static Image BytesToImage(byte[] bytes),爆出了img.src读取为空的错,可是我看xhr已经接收到了image对象,不知道为什么不能赋值成功。
  3. ERR_INVALID_URL,这个也是莫名其妙。。
  4. 我还更改了web.config中的一部分

web.config:
添加在节点下

<system.web.extensions>
  <scripting>
    <webServices>
      <jsonSerialization maxJsonLength="1024000000" />
    </webServices>
  </scripting>
  </system.web.extensions>

好累。。。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值