Rails 5：javascript预览和删除图像，水平对齐预览图片答案

【问题标题】：Rails 5: javascript preview and remove image, align horizontally the preview picsRails 5：javascript预览和删除图像，水平对齐预览图片
【发布时间】：2018-06-12 01:47:01
【问题描述】：

我已经在我的 rails 应用上实现了 javascript 预览和删除附件。但是预览图片的显示方式错误，我希望它们以水平对齐方式出现，而不是像现在出现的那样垂直对齐：

这是我的设置：

<script>
window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Only pics
                if(!file.type.match('image'))
                    continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("div");

                    div.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



                    output.insertBefore(div,null);
                    div.children[1].addEventListener("click", function(event){
                        div.parentNode.removeChild(div);
                    });

                });

                //Read the image
                picReader.readAsDataURL(file);
            }

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
</script>

上传和预览发生的表单：

<div class="form-group">
          <label class="btn btn-default">Add images<span style="display:none;">
           <%= form.file_field :attachments, multiple: true, id: "files" %></span></label>
        </div>

        <div class="image-box">
          <div id="result"></div>
        </div>
        &nbsp;
        <div class="form-group">
          <%= form.submit :class=>"btn btn-primary" %>
  <% end %>
        </div>

和.sass。部分：

.image-box
  text-align: center
  font-size: 18px
  margin: auto
  width: auto
  height: auto

.thumb
  width: 90px
  height: 90px
  margin: 0.2em -0.7em 3 0


.remove_img_preview
  position: relative
  top: -25px
  right: 5px
  background: black
  color: white
  border-radius: 50px
  font-size: 0.9em
  padding: 0 0.3em 0
  text-align: center
  cursor: pointer


.remove_img_preview:before
  content: "×"

关于如何将预览图片水平对齐并彼此相邻有什么想法？

【问题讨论】：

标签： javascript css ruby-on-rails sass

【解决方案1】：

在这些情况下，将 div 元素替换为 span。

var div = document.createElement("div");

            div.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



            output.insertBefore(div,null);
            div.children[1].addEventListener("click", function(event){
                div.parentNode.removeChild(div);

div 使代码块 100%，而 span 占用内容的特定宽度。

【讨论】：