Javascript - Loading image from disk, POSTing it in JSON object

Forums › IT Pro and developers › Javascript - Loading image from disk, POSTing it in JSON object

pwaddles

113 posts

Master Geek

#75000 11-Jan-2011 15:50

Hi guys,

I'm trying to make a webform to create new users by posting to a webservice. The webservice accepts a JSON object, one of the properties on this object can be an image for the user.

The problem I'm having is that I cant for the life of me work out how to get a browser to read in an image from a client PC, and store the image data in my client side JSON object.

I dont want to use flash if I can avoid it.

Has anyone had any luck with this sort of thing before?

Cheers

Hadley

--------------------------------
Core 2 Duo e6850 3Ghz
4 X 1Gb DDR2 @ 800Mhz
GeForce 8800 GT 512Mb
P35 DS3L Mobo

Ragnor

8279 posts

Uber Geek
+1 received by user: 585

Trusted

#426352 12-Jan-2011 00:40

What language are you working in php, ruby, .net?

Does your form post directly to the web service via the action property of the form or are you using JS to override the form submit creating a json object then using js to post to the ws?

pwaddles

113 posts

Master Geek

#426363 12-Jan-2011 07:43

Hi,

were using .Net web services, and yes I'd like to override the default submit behavior to create my JSON object before posting.

Thanks!!

--------------------------------
Core 2 Duo e6850 3Ghz
4 X 1Gb DDR2 @ 800Mhz
GeForce 8800 GT 512Mb
P35 DS3L Mobo

Ragnor

8279 posts

Uber Geek
+1 received by user: 585

Trusted

#426564 12-Jan-2011 15:50

JS a client side language and can't access the file on the users computer so the form containing the input of type file has to be posted to the server first.

Are you using jQuery?

There are heaps of "AJAX File Upload" plugins for jQuery which will handle using XHR or an IFRAME to upload the file to the server.

Typically you might override the form submit to let the plugin do it's thing uploading to your server side handler (you need to write something like file-upload.ashx to receive the post and save the file somewhere and return a id or name for the upload).

Then in the js onsuccess event of the plugin you create your JSON object and post to the Web Service. The JSON object will just contain and id or name for the file rather than the binary data. Then in your web service you just use the id/name to lookup the location of the physical file.

Anyway that's how I remember we've done it in the past, may not be 100% right... brain is in holiday mode atm.