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，如下所示：

WHERE

设置IsImgAdded标志

后更新JS函数imageIsLoaded（）

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

PS：我将id：upload-add-product更改为class upload-add-product 您可能需要调整代码..

Answer 2

在每个相框中加上加号图标。创建一个具有输入的函数。该输入将从html发送，如;

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";
    }
}

并且每个相框都有if语句。如果您最多5个，则禁用所有加号图标。

每次完成选择图片使用功能change(frame's index);

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

2 个答案: