Блог

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

1. UserRegistration(uid(PK),username….)
2. Профиль (ProfileID(PK), uid(FK), полное имя, пользовательский идентификатор …)
3. Комментарий (cmntID(PK), cmntText,uid (FK) ….)

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

 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 к одной и той же таблице.

Это код, лежащий в основе 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, установите атрибут ‘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 resu<
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }
  

Примечание: замените «Загрузки» в соответствии с вашими потребностями, которые являются папкой, в которой существует ваше изображение. Также обратите внимание, что я передаю ‘DocumentName’, который на самом деле является только именем файла.

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

В блоке 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