How do you send and receive the same image between the client and the server?

Question

I'm trying to implement a bandwidth test, and it looks like the most conventional way to do this is basically to transmit one or more images back and forth between a client and a server and see what the upload and download times are. In fact, this answer already covers the idea of getting a download time.

At this point though, I'm not too sure how to make the process go both ways, with or without using the other answer . Even after adding debugging statements, I haven't found where the picture's data is stored in the other answer's code. And if I try to start off with a clean slate, a lot of the API information I'm finding on the Internet / Stack Overflow about sending images back and forth has very little explanation or elaboration, so I'm not able to use it put the two together. Furthermore some experiments I have put together that have sometimes involved other platforms seemed to really throttle bandwidth usage, as well as scale the delay improperly with the images' sizes.

Using JavaScript, how do you transmit the same image back and forth between the client and server in such a way that you can accurately use the delay and the image's size to measure bandwidth? How do you make this work both ways with the same image, without throttling, and without interaction from the user?

EDIT

I could try posting things I've tried, but it's hard for it to be meaningful. A lot of it was in Flash. When I start using JavaScript, I started to experiment a little along these lines:

$.get('http://ip address/test.php?filename=XXX&data=LONG STRING OF DATA REPRESTING THE DATA TO BE SAVED PROBABLY LESS THAN 2K IN SIZE AND ALSO YOU SHOULD ESCAPE OR ATLEAST URIENCODE IT', function(data) {
    alert('here')
   eval(data);
});

The PHP file being:

<?php
    echo "response=here";
?>

And I used the PHP file both for Flash and for JavaScript. I also used Adobe Media Server with Flash. But going from a 1MB file to a 32MB file while using Flash/PHP, Flash would only scale the delay by 10 times, nowhere near 32. It also seemed to throttle bandwidth usage at least when paired with the AMS, and maybe even when it was paired with the PHP file.

I was about to convert the JavaScript code to pass the actual image in to the PHP file...but I can't get to it. Even when I do things like:

for (var s in download) {
    alert(s + ": " + download[s]);
}

download being the object that downloaded the image in the JavaScript (see the linked answer for the code), I'm not seeing anything useful. download.children.length is 0 and so on. I'm also reluctant to trust that the results aren't throttling bandwidth usage, like the Flash experiments did, without further confirmation; maybe the image has to be passed in using one type of API call or another to get it to really work right?

In essence, I'm really looking for good API information. Other stuff I saw just wasn't elaborate enough to connect the dots with.

2ND EDIT

One of the pitfalls I've run into is using POST to download the images. I'm running into a lot of difficulty in getting IIS 7 to allow POST to download arbitrary file types (namely jpgs) with "unusual" binary characters and allow them to be more than 2MB in size.

Answer 1

Why don't you send some text using $.post. Eg: Generate some big text:

var someText = '0123456789';
for (var i = 0; i <= 10000; i++)
{
    someText += someText;
}

then post it to the server:

var start = new Date();
$.post('yourUrl', {data:someText}, function(){
    var end = new Date();
    //this will show the bytes per second upload bandwidth
    alert(someText.length / ((end - start)/1000));
});

To be sure the result is exact, you can run this, for example, 10 times and get the average value.