douzuqin3467 2017-05-21 03:47
浏览 75
已采纳

如何编辑上传到某个盒子上的图片?

HTM like this :

<input type='file' multiple id="upload-file"/>
<?php
    for($i=0;$i<5; $i++) {

?>
    <div class="img-container" id="box<?php echo $i ?>">
        <button  style="display: none;" type="submit" class="btn btn-primary show-button">
            <i class="glyphicon glyphicon-edit"></i>
        </button>
    </div>
<?php
    }
?>

Javascript like this :

$(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;
            $(this).find('.show-button').show();
        }
    });     
};

$(".show-button").click(function(){
    $("#upload-file").click();
});

Demo and full code like this : http://phpfiddle.org/main/code/1g8t-h5kn

I try like that. But it does not fit

Should when I edit image on the box 2, it will change image on the box 2. Not box 3

How can I solve this issue?

  • 写回答

2条回答 默认 最新

  • doujie3888 2017-05-21 04:25
    关注

    You need to create a var to set the actual edited container than after the upload launch the function, check if the variable has a value different than null and append the img in the right place.

    WORKING FIDDLE HERE: https://codepen.io/VLK_STUDIO/pen/wdQPRL

    $(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]);
        }
      });
    });
    
    var actualEdited = "";
    
    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) {
          if (actualEdited == "") {
            $(this).append(imgTmpl);
            $(this).find(".show-button").show();
            IsImgAdded = true;
            return false;
          } else {
            $(actualEdited).find("img").remove();
            $(actualEdited).append(imgTmpl);
            $(actualEdited).find(".show-button").show();
            actualEdited = "";
            return false;
          }
        } else {
          if (actualEdited != "") {
            $(actualEdited).find("img").remove();
            $(actualEdited).append(imgTmpl);
            $(actualEdited).find(".show-button").show();
            actualEdited = "";
            return false;
          }
        }
      });
    }
    
    $(".show-button").click(function() {
      $("#upload-file").click();
      actualEdited = $(this).parent();
    });
    .img-container {
      width: 100px;
      border: 1px solid black;
      height: 100px;
      margin: 20px;
      display: inline-block;
    }
    
    img {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .show-button {
      cursor: pointer;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="upload-file" type="file">
    
    <div class="img-container">
      <div class="show-button">click
      </div>
    </div>
    <div class="img-container">
      <div class="show-button">click
      </div>
    </div>
    <div class="img-container">
      <div class="show-button">click
      </div>
    </div>
    <div class="img-container">
      <div class="show-button">click
      </div>
    </div>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题