Ajax passing image variable - ajax

Question

I used to use the following Ajax code to pass variables. However, it doesn't seem to work with images. Any suggestions?
<p>
<input type="file" name="image" /><br />
<input type="button" value="Submit" onclick="addImage()" />
</p>
<div id="content"> </div>
<script>
function addImage() {
var image = $('input[name=image]').val();
$.ajax({
type: "POST",
url: "/chat",
data: {'image': image},
cache: false
});
}
</script>

Answer 1

Correctly speaking, you'll need to pass the data to the page in a special manner. Check out this tutorial by Nettuts+, I used it when I was confronted with a similar problem.
The only difference is that you are only allowing a single upload, while it allows many uploads. You can fix that by turning off the multiple attribute.
Also, it automatically uploads the image after selection, so you might wanna try this:
document.getElementById('yourbuttonsid').onclick = function () {
var i = 0, len = this.files.length, img, reader, file;
document.getElementById("response").innerHTML = "Uploading . . ."
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
}
}
}
instead of this:
if (input.addEventListener) {
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
document.getElementById("response").innerHTML = "Uploading . . ."
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
}
}
}, false);
}
Hope I helped. Twiddle the settings to your personal need if necessary.

Answer 2

JSON objects are made only to transfer strings, basic objects, integers and a few other things. They are not meant for sending images. However, if you still want to try implementing this in your own way, I can think of two ways to do it. Firstly, just send the name of the images (exact link) or upload it and provide the path.
Or secondly, convert it to base64 in the browser, send it, and have code convert it back whenever required.
That would look something like this:
<form method="async" onsubmit="addImage(this.image)">
<input type="file" name="image" /><br />
<input type="submit" value="Submit" />
</form>
<div id="content"></div>
<script>
function addImage(img) {
$.ajax({
type: "POST",
url: "/chat",
data: {'image': toBase64(img)},
cache: false
});
}
function toBase64(img) {
// Create an HTML5 Canvas
var canvas = $( '<canvas></canvas>' )
.attr( 'width', img.width )
.attr( 'height', img.height );
// Initialize with image
var context = canvas.getContext("2d");
context.drawImage( img, 0, 0 );
// Convert and return
return context.toDataURL("image/png");
}
</script>