Image Upload -- showing image on web page before hitting Submit

Question

To better learn web development, I'm trying to write a PHP page that will let me upload and download files from a server, which I've done in ASP before.

I am however, tripping over something that reason says should be simple, but I'm not able to find an answer for it.

Here's the pretty standard code for the browse/submit:

<form enctype="multipart/form-data" action="uploadFile.php" method="POST"/>  
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />  
<input type="file" name="pix" size="100" />  
</form>

Now when you hit the "Browse.." button on the resulting web page, you get the standard file dialog and then return to the page with the correct file path in the text box. (AND, my uploadfile.php works just fine when I click Submit.)

What I'd like to do is actually SHOW the user (well, me) the picture on the web page if it is an IMG-suitable file or else a placeholder picture for non-image files -- BEFORE the user clicks the SUBMIT button.

Note the correct pathname for the client-side file is RIGHT there on the page. I cannot for the life of me figure out how to capture it from the DOM, or for that matter figure out how to get JavaScript to notice the return-with-correct-pathname in order to trigger showing the picture.

(I apologize for the broadness of this question -- I did try quite a bit of searching through previous questions and answers here, but when I'm lacking possibly not only the technical terms but the CONCEPTS it's hard to frame a question.)

Answer 1

You could use Ajax to submit the form in the background and save the image file to a temporary directory. Then, attempt to show it on the page by changing the src attribute of the img element. When the user finally clicks submit, copy the image to its final destination. If he cancels or browses away - delete the file.

Answer 2

Think about what you are asking for. If a web page could load arbitrary files from your (not the server's) filesystem, what would stop it from sending off your private data to any malicious website?

Answer 3

You can only do this with Flash.

Google something like "flash image upload with preview"

Answer 4

You can do this with Firefox and other browsers that support the FileList API.

var myImage = new Image(),
myImage.src = myFileInput.files[0].getAsDataURL();

Edit: The max file size should not be specified on the client side as it can be exploited but you can at least verify it on the client side using files[0].getAsBinary().length.

Answer 5

It is true that there are not one single solution to your problem. But in the current state of the web, the best way to do that is Flash. See this post for a how-to. Flash is a proprietary solution, but is implemented on 98%+ of all computers so it's a safe go. Just make sure you implement it following the progressive enhancement / graceful degradation methodology.

You could do it via a java applet, it's widely available and non proprietary, but that seems overkill to me (but i'm no java developer).

Silverlight? Well, say good bye to most of your users. As far as i know, it's far from being widely available. So people will have to install a plugin for them to be able to see that UI of yours. It might be ok in some contexts though (intranets, a fixed set of machines that you can manually set up yourself, etc.).

An ajax-based solution has the advantage of not being based on proprietary technologies, but it means uploading the file to the server, so it's not a solution in your case, as for big images, it would take quite long, and it wouldn't feel like a preview anymore, right?