上传图片后如何移动按钮？

Question

My html code is like this :

<input type='file' multiple style="display: none;" id="upload-file" />
<div class="img-container">
    <button type="submit" class="btn btn-primary" id="upload-add-product">
        <i class="glyphicon glyphicon-plus"></i>
    </button>
</div>
<?php
    for($i=0;$i<4; $i++) {

?>
    <div class="img-container" id="box<?php echo $i ?>">
    </div>
<?php
    }
?>

My javascript code is like this :

    $("#upload-add-product").click(function(){
        $("#upload-file").click();
    });

    $(function () {
        $(":file").change(function () {
            var noOfFiles = this.files.length;
            for(var i=0; i < noOfFiles; i++) {        
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[i]);
            }        
        });
    });

    function imageIsLoaded(e) {
        var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
        var IsImgAdded=false;
        $('.img-container').each(function(){
            if($(this).find('img').length==0 && IsImgAdded==false){
                $(this).append(imgTmpl);
                IsImgAdded=true;
            }
        });     
    };

Demo and full code is like this : http://phpfiddle.org/main/code/q47z-p15c

I want to make like this :

• When user select 2 image, plus icon will move to box number 3

• When user selects 5 image, plus icon will disappear

I had try to move the plus icon, but I can't do it

How can I solve this problem?

Answer 1

You can add buttons to each container only the first button will be visible initially. display the next button only after the image is added to the container

Update your Html as given below :

<?php   for($i=0;$i<5; $i++) { ?>

  <div class="img-container" id="box<?php echo $i ?>" data-status="0">
    <button type="submit" class="btn btn-primary upload-add-product"<?php 
  if($i!=0) echo' style="display:none;"'; ?> >
    <i class="glyphicon glyphicon-plus"></i>
  </button>
  </div>

<?php } ?>

Update the JS Function imageIsLoaded() after you set the IsImgAdded flag

 $(this).attr('data-status',1)
 $(this).find('button').hide()
 $('.img-container').each(function(){

   if( $(this).attr('data-status') != 1){
     $(this).find('button').show();
     return false;
   }

})

PS : i changed the id : upload-add-product to class upload-add-product You might need to tweak the code..