如何在asp.net中使用jquery ajax从数据库加载图像
我正在通过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:
- UserRegistration(uid(PK),username ....)
- 个人资料(profileID(PK),uid(FK),全名,userPic ...)
- 注释(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.