How to update image src with the local path when user has selected an image file?

Question

Hi,

Html

<input type="file" name="picture" value="" />
<img id="preview_pic" src="/images/no-image.jpg" alt="" height="100" width="100" />

I can see the "file" input box gets populated with local file path. I want to replace the img src with this new local file path to just give a preview of the image they have selected. If the file they have selected isnt an image file then keep the default no-image as is. Any ideas how to do this with Jquery. Once the form is submitted, I can process the file on server.

Thank you.

[ps - I am not sure which event to use, which makes sure that user has selected a file. for example I use onclick when user has clicked etc]

Answer 1

You cannot do this because of security restrictions. For most browsers, if a page fetched over http:// has a file:// url in its contents (or you construct one from the file input), the file will not be retrieved. The apparent exception is older versions of Internet Explorer (though I haven't tested this myself).

There are some plugins that use Adobe Flash to enable client-side image preview prior to upload, but you must then also make sure your server is configured correctly to handle the upload itself when it happens.