如何在asp.net中使用jquery ajax从数据库加载图像 [英] How to load image from database using jquery ajax in asp.net

问题描述

我正在通过jQuery AJAX在ASP.Net中创建注释系统，但是我面临着从数据库加载图像的问题.我的数据库中有3个表:

I am creating comment system in ASP.Net through jQuery AJAX but I am facing a problem of loading images from the database. I have 3 tables in the database:

1. UserRegistration(uid(PK)，username ....)
2. 个人资料(profileID(PK)，uid(FK)，全名，userPic ...)
3. 注释(cmntID(PK)，cmntText，uid(FK)....)

以下是jQuery AJAX代码:

The following is the jQuery AJAX code:

function getcomment() {
    var postPlace = $('div.q1');
    $.ajax({
        url: '/WebForm1.aspx/GetComment',
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: 'json',
        type: 'POST',
        success: function (data) {
            var newData = jQuery.parseJSON(data.d);
            var trHtml = '';
            var loadPost = postPlace;

            $.each(newData, function (i, item) {
                trHtml += '<div class="q2" style="background-color: red">' +
                   '<img src="' + item.userPic + '" class="img-circle" width="32px" height="32px" />'+
                   '<span>' + item.username + '</span>' +
                   '<p>' + item.cmntText + '</p>' + '</div>';
            });
            loadPost.html(trHtml);
        }

这是循环内的item.userPic的问题. item.username和item.cmntText正常工作，但item.userPic无效.但是，当我访问概要文件表的另一个属性，例如fulname时，它就起作用了.我只是无法访问同一张表的userPic.

Here is the problem with item.userPic which is inside the loop. item.username and item.cmntText works well but item.userPic is not working. However when i access another attribute of the Profile table like fulname then it works. I just can't access userPic of the same table.

这是C#中的代码:

[WebMethod]
public static string GetComment()
{
    string connection = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;
    SqlConnection con = new SqlConnection(connection);
    SqlDataAdapter da = new SqlDataAdapter("select * from userregistration inner join comment on userregistration.uid=comment.uid inner join profile on comment.uid=profile.uid  order by cmntID DESC ", con);
    DataTable dt = new DataTable();
    da.Fill(dt);
    return JsonConvert.SerializeObject(dt);
}

这是我得到的结果:

推荐答案

如果要检索base64编码的字符串，请使用base64编码的字符串设置image标签的'src'属性. 例如:

If you are retrieving a base64 encoded string, set the 'src' attribute of the image tag with the base64 encoded string. For example:

$("#img").attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

如果要检索图像的路径，则必须使用ajax调用来检索图像，并在asmx中使用HttpContext.Current.Server.MapPath("~/")，在该位置必须指定图像文件夹的位置.

In case you are retrieving the path of the image, you have to retrieve the image using ajax call and use the HttpContext.Current.Server.MapPath("~/") in asmx where you have to specify the location of your image folder.

将以下代码段添加到函数或网络方法中，

add the below code snippet to a function or web method,

string strdocPath;
        try
        {
            strdocPath = (Server.MapPath("~\\Uploads\\" + DocumentName));

            FileStream objfilestream = new FileStream(strdocPath, FileMode.Open, FileAccess.Read);
            int len = (int)objfilestream.Length;
            Byte[] documentcontents = new Byte[len];
            objfilestream.Read(documentcontents, 0, len);
            objfilestream.Close();
            string result = Convert.ToBase64String(documentcontents);
            return result;
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }

注意:根据需要替换上传文件"，该文件是图像所在的文件夹.另外请注意，我传递的"DocumentName"实际上只是文件名.

Note: Replace the 'Uploads' according to your needs which is the folder where your image exists. Also note that i'm passing the 'DocumentName' which is actually the file name only.

这篇关于如何在asp.net中使用jquery ajax从数据库加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！