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?
1 Answer
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>