views:

44

answers:

2

Our webform has a file upload, and just a regular picture box on it. Now we already have the code to save the pictures and retrieve them, but how would you display the picture they selected without first saving it, then refreshing the page and displaying it? Is this a javascript thing?

Thanks in advance.

+3  A: 

This definitely is not possible with JavaScript. It might be possible with a Flash uploader (but I really don't know Flash). JavaScript does not have any sort of direct access to the host's file system.


On second thought - it might be possible to inject an img tag whose src is a file:// URL. I'm not sure about this, though. Checking now.

Matt Ball
Flash does not allow it either, both can only access a filename and submit the file in a POST request.
Alan Geleynse
Oh that sucks. I was hoping this wouldn't be to complicated.
broke
Yeah, security restrictions can make things harder, but they are definitely there for a reason.
Alan Geleynse
Matt, it certainly is possible using file protocol. I've done it before in an intranet application. Certain permissions must be granted (in IE at least; that's all we had to worry about at the time). Easiest way is to add the given site to their "Trusted Sites" list.
Josh Stodola
@Josh: I definitely can't get it to work in Firefox. Firebug's element tooltip shows the image just fine, but I'm guessing that Firefox's security is set up to prevent this (and I don't feel like digging through the `about:config` page right now)
Matt Ball
@Matt Yeah we never tested it in anything besides IE
Josh Stodola
+5  A: 

Most browsers do not allow this. Filed picked will be submitted with the form, but will not be available to javascript. This is to prevent javascript from having access to local files.

Your best solution is to use AJAX to upload the file, then retrieve it from the server and display it. This solution makes it so the initial view takes longer, but if the user then decides it is the file they want, you can avoid sending it to the server again and just move it from a temporary storage area to a permanent one.

Alan Geleynse
+1 for the Ajax suggestion. Definitely the right way to go.
Matt Ball
Good suggestion. Thank you.
broke