jQuery前端base64上传图片到后端

新酱
151
文章
41
评论
更多
 2019年6月8日13:51:38 评论 3,917 511字阅读1分42秒

base64

优点：base64可以直接存在数据库中，然后直接查询出来浏览器会自动将其转换为图片，不需要将图片保存到服务器中。

缺点：base64转换的图片不能太大，否则会导致base64太长无法存入数据库！主流还是应该将图片存在服务器，数据库查询链接！这里因为我是上传头像，并且设置了图片分辨率必须为200x200，使用base64没有问题。

jQuery代码

1
2
3
4
5
6
7
8
9
10
$('#file').change(function () {
                        var v = $(this).get(0).files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(this.files[0]);
                        reader.onload = function (e) {
                            var base64 = e.target.result;
                            $('#base64').attr("src", base64);
                        }
 
                    });

利用id选择器找到这个file，file的value值发生变化的时候执行这些代码将图片转换为base64字符串，$('#base64').attr("src", base64);是将产生的base64添加到img标签中实现头像预览的功能。接下来发ajax将base64传到后端判断大小。

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public ActionResult Addusers(string name, string user, string pwd, string email, string address, int deptid, int meony, string base64)
        {
            if (uBll.GetSingleData(u => u.UserName == user)!=null)
            {
                return Content("该用户已经存在！！");
            }
            else
            {
                //base64转化为图片
                byte[] bys = Convert.FromBase64String(base64.Substring(23));
                MemoryStream ms = new MemoryStream(bys);
                Image img = Image.FromStream(ms);
                if (img.Width > 200 || img.Height > 200)
                {
                    return Content("请上传200x200像素的头像图片！");
                }
                else
                {
                    Users u = new Users();
                    u.Money = meony;
                    u.RealName = name;
                    u.UserName = user;
                    u.UserPass = pwd;
                    u.Email = email;
                    u.Address = address;
                    u.DeptID = deptid;
                    u.UserImg = base64;
                    uBll.AddData(u);
                    return Content("ok");
                }
            }
            
        }

将传过来的base64去掉前缀转换成byte数组，然后传入内存流，用Image将byte数组重新组成一张图片，然后判断是否分辨率大于200x200，如果大于则不予添加数据库，相对于asp.net来说，php的jquery上传base64更为简单。

  • 版权声明： 发表于 2019年6月8日13:51:38
  • 转载注明：https://www.xiaorenjc.net/program/asp-net/163

您必须才能发表评论！