How to preview a image in long form

Question

I want to get preview of an image before uploading it in a form which have other field like name,age etc. i have tried the ajax solution. the code works fine standalone. But When i put the code into the form it does not work.plz help me.

the code is as follow: standalone code for image preview through Ajax

 <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>

and my form is

<form name="iupload" action="index.php" method="post" >
Name <input type="text" name="myname" ><br/>
Age <input type="text" name="age" >
 <input type="file" name="photoimg" id="photoimg" />

<input type="submit" name="submit" value="upload">

<div id='preview'>
</div>

</form>

You normally don't need to, because the file-select dialog of the browser displays a thumbnail and information about the file already. — hakre, Jan 06 '12 at 20:57
@hakre user need to see the preview of the image uploaded(avatar). — Ashutosh Mishra, Jan 06 '12 at 21:02
You can't access the value of a `` element with javascript. That's prevented for security reasons. So you can't create anything here. You might be looking for some fancy HTML5 stuff probably, but your question does not says so. — hakre, Jan 06 '12 at 21:10
possible duplicate of [is it possible to preview local images before uploading them via a form?](http://stackoverflow.com/questions/922057/is-it-possible-to-preview-local-images-before-uploading-them-via-a-form) — Diodeus - James MacFarlane, Jan 06 '12 at 21:24

score 1 · Answer 1 · answered Jan 06 '12 at 20:51

1

You can't preview local images in the browser. The browser doesn't have access to the local filesystem. You need to use Flash, Java or Active-X plugins to do this

answered Jan 06 '12 at 20:51

Diodeus - James MacFarlane

112,730
33
157
176

please give some reference, i think we can do it through ajax ,php and js only – Ashutosh Mishra Jan 06 '12 at 21:03
If the browser could access the local filesystem it would be a huge security hole. We'd have malicious pages stealing our files. – Diodeus - James MacFarlane Jan 06 '12 at 21:23

score 0 · Answer 2 · answered Jan 06 '12 at 21:11

0

Have you tried other AJAX upload plugins? I've personally tried this one and it's worked for me.

http://valums.com/ajax-upload/

There's another tutorial on how to use it here:

http://css-tricks.com/ajax-image-uploading/

answered Jan 06 '12 at 21:11

tedski

2,271
3
27
48

David Hellsing · Accepted Answer · 2012-01-06T22:41:45.187

I would say that you can display the local image before uploading in all browsers that supports the File API, and old versions of IE (version 7 and below).

Using the File API, you can obtain a local blob using the window.URL.createObjectURL method. IE8 beta introduced a 'fakefile' addition to hide the local file URL, to fix a security issue as explained here. But in older versions, you should be able to 'exploit' this security hole.

Something like this could work (fiddle):

$('form input[type=file]').change(function() {
    var src;
    if ('files' in this) { // File API supported (webkit/FF)
        var obj = this.files[0];
        src = window.URL ?
            window.URL.createObjectURL(obj) :
            window.webkitURL.createObjectURL(obj);
    } else {
        if (/fake/.test(this.value)) {
            // fallback to whatever (IE8, IE9)
        } else {
            src = this.value; // exploits the IE security hole
        }
    }
    $(new Image()).attr('src',src).appendTo('body'); // the local image!
});

How to preview a image in long form

3 Answers3