Как загрузить изображение из базы данных с помощью jquery ajax в asp.net

Я создаю систему комментариев в ASP.Net через jQuery AJAX, но мне приходится сталкиваться с проблемой загрузки изображений из базы данных. У меня есть 3 таблицы в базе данных:

  1. Регистрация пользователя (UID (PK), имя пользователя ....)
  2. Профиль (profileID (PK), uid (FK), функция 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 ( данные . д ); var trHtml = '' ; var loadPost = postPlace ; $ . каждый ( 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 ...)
  3. Комментарий (cmntID (PK), cmntText, UID (FK) ....)

Ниже приведен код jQuery AJAX:

item.username

Вот проблема, item.cmntTextкоторая находится внутри цикла. item.userPicи fulnameработает хорошо, но userPicне работает. Однако, когда я получаю доступ к другому атрибуту таблицы Profile, как fulnameтогда, он работает. Я просто не могу получить доступ userPicк одной таблице.

Это код в 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);
}

В результате я получаю:

введите описание изображения здесь

c#,jquery,asp.net,ajax,

0

Ответов: 2

1

Если вы извлекаете строку с кодировкой base64, установите атрибут 'src' тега изображения с кодировкой base64. Например:

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

Если вы извлекаете путь к изображению, вам нужно получить изображение с помощью вызова ajax и использовать HttpContext.Current.Server.MapPath("~/")в asmx, где вы должны указать местоположение папки с вашим изображением.

добавьте нижеприведенный фрагмент кода к функции или веб-методу,

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();
        }

Примечание. Замените «Uploads» в соответствии с вашими потребностями, которая является папкой, в которой находится ваше изображение. Также обратите внимание, что я передаю «DocumentName», которое на самом деле является только именем файла.

0

У вас есть другая страница или обработчик, который принимает идентификатор пользователя и возвращает изображение, код должен работать следующим образом:

В блоке JavaScript вы измените часть, которая рисует тег изображения

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

Затем создайте новый обработчик HTTP, как показано ниже.

public class UserImagesHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //Get username from from query string

        //Get binary data

        context.Response.ContentType = "image/jpeg";
        context.Response.BinaryWrite(bytes);
    }
}

Затем зарегистрируйте обработчик в web.config

C #, JQuery, asp.net, AJAX,
Похожие вопросы
Яндекс.Метрика