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