Home/ Questions/Q 886737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:07:06+00:00

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

  • 0

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]

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0