ASP.NET MVC 将图片用CLOB格式存储在数据库中并客户端读取显示

在做网站用户登录的时候，需要完成用户选择头像图片上传到服务器，然后登录的时候显示对应头像

解决方案：一、数据库存储图像路径，将图像上传达到WEB服务器存储。（这里不多说，很好实现）

                 二、直接将图片转换为数据流存储在数据库中，这里用到的是oracle 数据库的CLOB数据类型

前端：用<input file>选择上传图片

<input type="file" name="picture" id="picture"  style="position:absolute;clip:rect(0 0 0 0);" />

这里我隐藏了input标签（太丑了一般很少直接用，都是用别的标签代替）这里用img的点击事件绑定<input file>标签

img标签：

               <div class="Regist-message-picture">
                    <img src="~/image/HomePic/头像.png" id="uoloadpicture" /> 这里有个初始头像图片
                </div>

js 代码：

 $('#uoloadpicture').click(function(){
        $("#picture").click();
    });  绑定<input file>标签

$("#picture").change(function () {
    if (FileSize() > 4194304) {
        alert("选择图片不能大于4MB！");
    }
    else {
        $("#uoloadpicture").attr("src", URL.createObjectURL($(this)[0].files[0]));
    }
});
function FileSize() {
    var f = document.getElementById("picture").files;
    //大小 字节  
    var size = f[0].size;
    return size;

}

这里实现点击头像图片选择自己的头像界面显示选择头像

服务端：接收上传图片，转化为数据流存储在数据库，这里数据库用的是EF6，根据自己的环境修改。

 public ActionResult Regist（ HttpPostedFileBase picture）

{

                MemoryStream target = new MemoryStream();
                picture.InputStream.CopyTo(target);
                byte[] data = target.ToArray();
                NewMSG.PICTURE= Convert.ToBase64String(data);   这里用Convert.ToBase64String（）可以保证转换的数据流无损。
                DB.USERMSG.Add(NewMSG);
                DB.SaveChanges();

}

到这里就实现了保存

登陆的时候

后台：

依然是EF6

 var picture= from m in DB.USERMSG where m.WORKNUM.Trim() == user.Trim() select m.PICTURE;

  Session["picture"]= picture.ToList()[0].ToString();

将对应工号（用户名）的图片读取出来存放在session

 public ActionResult action()
        {
            byte[] img = Convert.FromBase64String(Session["picture"].ToString());
            return new FileContentResult(img, "image/jpeg");//返回图片

        }

这里直接返回图片

前端：

                       <div class="Head-portrait">
                            <img src="/USER/action" class="Head-portrait-img" />

                        </div>

头像框的img标签src直接写到action()函数

到此就完成了注册