Image Upload — showing image on web page before hitting Submit

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

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.

Advertisement

Answer