Próbuję zrobić przesyłanie zdjęcia ze strony klienckiej przez JQuery Ajax i Asp.net Web Api 2. Plik ze zdjęciem pakuję sobie do obiektu FormData i wysyłam go do serwera, gdzie zapisuję go do bazy danych(tablica bajtów). Problem polega na tym że nie wiem jak w Ajax odczytać ten plik i przypisać zdjęcie do znacznika HTML (img) - web api zwraca obiekt HttpResponseMessage.
Kod:
function AjaxGetImage() {
return $.ajax({
url: 'http://localhost:57808/api/image',
datatype: 'json',
type: 'get'
})
.done(function (data, textStatus, xhr) {
console.log('Data from ajax: ' + data);
$('#AjaxImg').attr('src', 'data:image/jpg;???');
})
.fail(function () {
console.log('Error');
})
}
// GET: api/image
public HttpResponseMessage GetImage()
{
CardWord cardWithImage = null;
using (EfDbContext dbContext = new EfDbContext())
{
cardWithImage = dbContext.cardWords.Where(x => x.Id == 12).FirstOrDefault();
}
var response = Request.CreateResponse(HttpStatusCode.OK);
MemoryStream memoryStream = new MemoryStream(cardWithImage.Image); //Image - byte[]
response.Content = new StreamContent(memoryStream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue(cardWithImage.ImagePath); //ImagePath - string
return response;
}
Dodam, że jeśli wyślę request do api z postmana to w zakładce body zdjęcie wyświetla się prawidłowo.