I created a front-end form and have several image upload fields. I was able to create a post and have the images attached. But what I would like to do is have the user see a preview of the image they are about to upload before submitting the Post.

I've read quite a few alternatives, Uploadify, Valums.com http://valums.com/ajax-upload, SWFupload and a few others I can't remember. But the problem with all of them is that once i implement them in the form, the images are no longer attached to the post, but only uploaded to the server.

Any suggestion or code sample I can use to do this? I have scoured the net for an answer - perhaps it's just not possible in WP to preview an image and also attach it to a post in one form?

2 Answers 2


Just add this scripts in header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
     function readURL(input) {
       if (input.files && input.files[0]) {
        var reader = new FileReader();

         reader.onload = function (e) {
           .attr('src', e.target.result)

      else {
      var img = input.value;
$(document).ready(function() {
  $("#x").click(function() {

Add for Internet explorer:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Add style to the header.

 article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
 #x { display:none; position:relative; z-index:200; float:right}
 #previewPane { display: inline-block; }

Note this should be added in header of that page or ur theme and this will be upload bar with preview u can also cancel the preview with this

<input type='file' onchange="readURL(this);" /><br/>

<span id="previewPane">
 img id="img_prev" src="#" alt="your image" />
 span id="x">[X]</span> </div> </div>
  • 2
    Please format your answer correctly. All code should have an intent of four spaces to create copy able area for scripts, code and CSS. ... If that makes sense.
    – Nicole
    Nov 20, 2012 at 14:31
  • 1
    You shouldn't be manually loading jQuery like that either. Nov 20, 2012 at 14:55
  • I will take care next time
    – vaibhav
    Nov 20, 2012 at 15:19
  • Regarding jQuery: WordPress contains it anyway, do not load it from Google directly. Also, within this snippet, there is nothing which cannot be done easily without jQuery. The opposite is true: jQuery tempts to favour short syntax over efficient code, like repeating the expensive command $("#x") unnecessarily. Mar 23, 2023 at 11:58

how can i apply this code to a wpjobsearch plugin ?

the input looks like this : input id="job_attach_files" name="job_attach_files[] type="file" class="upload jobsearch-upload multiple="multiple" onchange="jobsearch_job_attach_files_url(event)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.