Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer 1

Just add this scripts in header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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) {
           $('#img_prev')
           .attr('src', e.target.result)
           .height(100);
         };

        reader.readAsDataURL(input.files[0]);
    }
      else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>

Add for Internet explorer:

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

Add style to the header.

<style>
 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; }
</style>

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>
share|improve this answer
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 '12 at 14:31
    
You shouldn't be manually loading jQuery like that either. –  Stephen Harris Nov 20 '12 at 14:55
    
I will take care next time –  vaibhav Nov 20 '12 at 15:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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