Html

<i开发者_StackOverflow中文版nput 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]

---

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.

---

This may be just a thought/idea... You can copy the image to be uploaded in temp folder internet "%temp%" folder where web pages data is cached and try to open on client machine for preview using javascript commands.

Here's the snippet that might help you -

x-browser file input handing

Choose an image:

<input type='file'  onchange="document.images[0].src=getPath(this);"  />

preview

<img src="#" alt="your image"    /> 

Compatibility

tested in FF3.5, chrome, IE8.

IE8 needs a security settings change: internet settings, security, custom level :

[] Include local directory path when uploading files to a server
    ( ) Disable
    (o) Enable 

function getPath(input){ if(input.files && input.files[0]){ return input.files[0].getAsDataURL(); } return input.value || "No file selected"; }

I have not tested this. Yes.This may be present in HTML 5.