0

I want a user to be able to add & see a preview of multiple images in their post before they submit their post. This can be accomplished using jQuery, I'm just not sure how.

The link below is helpful yet doesn't fully answer my question.

Preview an image before it is uploaded

Essentially a user will click [add images], and select multiple images, after this they will see all their selected images and then click POST.

I'll be doing the same thing with embedding YouTube links and normal links within the same post.

So at the end there will be 3 buttons... [add images], [add video], [add link]

However the main question is for previewing multiple images.

Amir
  • 1,184
  • 2
  • 9
  • 20
Charl Du Plessis
  • 25
  • 8

2 Answers2

0

Your question is fairly general and there are multiple approaches that could work. What exactly is the problem that you are facing?

You may find this to be a useful starting point: http://blueimp.github.io/jQuery-File-Upload/

canadaCoder
  • 781
  • 7
  • 4
0

Here's an example with preview and remove option

<input style="display:none;" class="uploader" accept="image/*"  type="file" name="images[]" />
<div class="previewimg">//here preview images will be append


<script type="text/javascript">
var i=0,MAX_UPLOAD=10;
$(function(){

    $('[name=images\\[\\]]').change(function(){
                if(isvalidfileext($(this).val())){
                    var el=$(this).clone();
                    genpreview(this);
                    if($('.uploader').length==MAX_UPLOAD){
                        el.attr('disabled','disabled');
                    }
                    el.val('');
                    el.insertBefore(this);
                    el.bind('change',arguments.callee);
                    $(this).unbind('change',arguments.callee).hide();
                    submitcontrol();
                }else{
                    $(this).val('');
                    alert('Invalid extension');
                }
            }
    );
});
function isvalidfileext(name){
    var ext=name.toLowerCase().substr(-4);
    if(ext=='.png'||ext=='.jpg'||ext=='.gif'){
        return true;
    }
    return false;
}
function genpreview(field){
    var file=field.files.item(0);
    var tpl='<div class="add-photo-btn-showpic">'+//the image preview div
    '<div class="add-photo-btn-showpic1"><img   /></div>'+//the image preview div
    '<div class="add-photo-btn-showpic2">//the image preview div
           <a href="#" class="remove" onclick="return false;">Remove</a></div>'+//the image preview div
    '</div>';       
    var el=$(tpl);
    var image=new Image();
    image.onload=function(){
        var img=el.find('img');
        if(image.width>image.height){
            img.attr('width',80);
            img.attr('height',80);              
        }else{
            img.attr('width',80);
            img.attr('height',80);
        }
        img.attr('src',image.src);
    }
    image.src=window.URL.createObjectURL(file);     
    el.find('a.remove').click(function(){
        $(field).remove();
        $(el).remove();
        $('.uploader:visible').removeAttr('disabled');
        submitcontrol();
    });
    el.appendTo('.previewimg');
}
</script>
Gopal
  • 851
  • 12
  • 18