How to upload image and show preview "without form submit"?

I have very large form it contains 30 fi开发者_StackOverflow社区elds, but i need to upload image when it changes browses. like profile photo. use any using ajax, jquery or PHP.. Please give me code or some suggestions.

Sadly, it's no longer possible because in modern browsers

• you can't read the full path of an image from an upload field any more
• links to local resources don't work anymore

for security reasons.

you can place file upload related content in iframe and include that iframe in main page. so on post back of file upload, you can get image path from response and show in main page.

Main page:

 <p>
                <iframe id="ifrFileUpload" scrolling="no" frameborder="0" hidefocus="true" style="text-align: left;
                    vertical-align: middle; border-style: none; margin-right: 120px; margin-bottom: 20px;
                    float: right; width: 70%; height: 40px" src="http://site.com/FileUpload">
                </iframe>

            </p>

IFrame:

<form id="form1" name="form1" action="http://site.com/FileUpload" enctype="multipart/form-data"
    method="post">
 <p>   
    <input type="file" id="file1" name="file1" />

    <input type="submit" value="Upload" />

 </p>
    </form>

and on response, you can call parent function method to show image