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

Question

我的 html 代码是这样的:

<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
    }
?>

我的 javascript 代码是这样的:

    $("#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;
            }
        });     
    };

演示和完整代码如下:http://phpfiddle.org/main/code/q47z-p15c

我想做成这样:

• 当用户选择 2 个图像时，加号图标将移动到第 3 个框

• 当用户选择5张图片时，加号图标会消失

我曾尝试移动加号图标，但我做不到

我该如何解决这个问题？

Answer 1

您可以向每个容器添加按钮，只有第一个按钮最初是可见的。仅在将图像添加到容器后显示下一步按钮

更新您的 Html，如下所示:

<?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 } ?>

设置 IsImgAdded 标志后更新 JS 函数 imageIsLoaded()

 $(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;
   }

})

附言:我将 id : upload-add-product 更改为类 upload-add-product您可能需要调整代码..