如何删除图标添加到图像附加

Question

我附上图片到我的div使用该代码：

$(function() { 

var imagesPreview = function(input, placetoinsert) { 

    if (input.files) { 
     var filesAmount = input.files.length; 

     for (i = 0; i < filesAmount; i++) { 
      var reader = new FileReader(); 
      if (i>=5) { 
       break; 
      } 
      reader.onload = function(event) { 
       $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('.preview').addClass('added_images'); 

      } 
      reader.readAsDataURL(input.files[i]); 
     } 
    } 
}; 

$('#gallery-photo-add').on('change', function() { 
    imagesPreview(this, 'div.gallery'); 
}); 
}); 

图片我从输入文件场得到我的观点。现在我想为每个图像添加另一个图像，如“删除”。 ？我该怎么办，我的DIV现在是空的：

<div class="preview"> 

      </div> 

Answer 1

我会简单地创建所需的HTML，而只使用这样的事：

$($.parseHTML('<div class="someClass">close</div>')).appendTo('.preview'); 

然后就是听

$('.someClass').click(function(){ 
    // do stuff 
}); 

Answer 2

如果您希望关闭图标/按钮是可点击的，您可能需要用div来包装图片，然后添加一个按钮，然后使用CSS进行样式设计。

这里的示例：

var imagesPreview = function(input, preview) { 
 

 
    if (input.files) { 
 
    var filesAmount = input.files.length; 
 

 
    for (i = 0; i < filesAmount; i++) { 
 
     var reader = new FileReader(); 
 
     if (i >= 5) { 
 
     break; 
 
     } 
 
     reader.onload = function(event) { 
 
     var img = "<img src='" + event.target.result + 
 
      "'>", 
 
      height = $($.parseHTML(img))[0].naturalHeight, 
 
      width = $($.parseHTML(img))[0].naturalWidth, 
 
      imgSpan = "<div style='height:" + height + 
 
      "px;position: relative;width: " + width + 
 
      "px;'><button class='btn-close'>X</button>" + img + 
 
      "</div>"; 
 

 
     $($.parseHTML(imgSpan)).appendTo(preview); 
 
     } 
 
     reader.readAsDataURL(input.files[i]); 
 
    } 
 
    } 
 
}; 
 

 
$('#btn-gllry-add').on('change', function() { 
 
    imagesPreview(this, 'div.gallery'); 
 
}); 
 

 
$(document).on('click', '.btn-close', function() { 
 
    $(this).parent().remove(); 
 
    $('#btn-gllry-add').val(""); 
 
});

.btn-close { 
 
    background-color: #5a5a5a; 
 
    border: 0; 
 
    border-radius: 999px; 
 
    color: #fff; 
 
    height: 2em; 
 
    line-height: 1em; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 2em; 
 
} 
 

 
.btn-close:link, 
 
.btn-close:visited, 
 
.btn-close:hover, 
 
.btn-close:active { 
 
    background-color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label>Upload Image: </label> 
 
<input id="btn-gllry-add" type="file" name="file"/> 
 
<div class="gallery"></div>

也更新.appendTo(preview);所用的传递的参数。以前您的代码没有使用placetoinsert（在我的示例中重命名为预览），因为.preview是硬编码的。