CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
samuel toh
samuel toh

Reputation: 7076

How to move button after upload image?

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 :

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

How can I solve this problem?

Upvotes: 0

Views: 166

Answers (2)

Shan
Shan

Reputation: 1103

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..

Upvotes: 1

&#220;mit Aparı
&#220;mit Aparı

Reputation: 568

Put the plus icon in each and every one of picture frames. Create a function that has an input. That input would be sent from the html such as; 

function change(input) {
    var a = input; 
    if (a == 1)
    {
         document.getElementById(second picture's plus icon).style.display = "block";
         document.getElementById(first picture's plus icon).style.display = "none";
    }
}

and have if statements for every picture frame. If you up to 5 you disable all the plus icons.

Everytime you finish selecting a picture use function change(frame's index);

Upvotes: 0

Related Questions