Forum

Number Of Page View:100,000+/Months
LOGIN |New User

Reply

How to send an image using Ajax?
 Yes, you can send an image with Ajax.
Like that Google Maps.As per Ajax request Urls of images send as the response and we can set those URLs using DHTML.
Example:
 Tn this example an XML document is returned from an AJAX.
<categories>
<category>
<cat-id>001</cat-id>
<name>IT</name>
<description>Improve your skill</description>
<image-url>IT_image.gif</image-url>
</category>
<category>
<cat-id>002</cat-id>
<name>Mathematics</name>
<description>Solve problem easily</description>
<image-url>mathematics.gif</image-url>
</category>
</categories>
  We use image-url element to contain the location of the URL.The callback method that we used in AJAX interaction will parse the response XML document and call the addCategory function.    
 The addCategory function looks up a table row element "categoryTable" in body of the page and adds a row to the element that is use to contains the image.

<scrip type="text/javascript" >
...
function addCategory(id, name, imageSrc) {
var categoryTable = document.getElementById("categoryTable");
var row = document.createElement("tr");
var catCell = document.createElement("td");
var img = document.createElement("img");
img.src = ("images" + imageSrc);
var link = document.createElement("a");
link.className ="category";
link.appendChild(document.createTextNode(name));
link.setAttribute("onclick", "catalog?command=category&catid=" + id);
catCell.appendChild(img);
catCell.appendChild(link);
row.appendChild(catCell);
categoryTable.appendChild(row);
}
</script>
...
<table>
<tr>
<td width="300" bgoclor="lightGray">
<table id="categoryTable" border="0" cellpadding="0"></table>
</td>
<td id="body" width="100%">Body Here</td>
</tr>
</table>
  source of the image is set to the image source. And we can load the image using a subsequent HTTP request for the image at the URL. "images/IT_image.gif" 
         or 
"images/Mathematics.gif" 
 This will occur when you add the image in the categoryTable.
Posted By: Name:Rajesh Kr URL: How to send an image using Ajax?