Jquery append oly获取循环Rails中的最后一个elemen

Jquery append oly getting last elemen in loop Rails

本文关键字：最后一个 elemen Rails 循环 append oly 获取 Jquery      更新时间：2023-09-26

嗨，伙计们，我不在jquery，我遇到了这个问题，当用户加载文件时，我试图显示图像预览。我发现了一些帖子，但无法使其工作。它只显示最后一个图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var counter = 0
        var reader = new FileReader();
        var img = '';
        reader.onload = function (e) {
          debugger
          img.attr('src', e.target.result)
          .width(150)
          .height(150);
          $('.test').append(img.clone());
          console.log(img);
        }
        for(var i=0; i< input.files.length; i++){
          img = $('<img id="dynamic'+i+'" style="margin-top : 5px;  margin-right: 5px;">');
          reader.readAsDataURL(input.files[i]);
          counter++;
        }
    }
}

这是一块haml形式的

  .form-group
    = f.label :proyecto_imagenes, "Imágenes de proyecto", class: 'col-xs-2'
    .col-xs-8
      = f.file_field :imagenes, multiple: true
      %br
      .test

提前感谢

您可以使用闭包

function readURL(input) {
  if (input.files && input.files.length > 0) {
    for (var i = 0; i < input.files.length; i++) {
      (function(i) {
        var img = $('<img id="dynamic' + i + '" style="margin-top : 5px;  margin-right: 5px;">');
        var reader = new FileReader();
        reader.onload = function(e) {
          img.prop('src', e.target.result).width(150).height(150).appendTo('.test');
        }
        reader.readAsDataURL(input.files[i]);
      })(i)
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" onchange="readURL(this)" multiple/>
<div class='test'></div>

我认为您需要将函数绑定到事件。类似于：

请注意变化：

   .form-group
     = f.label :proyecto_imagenes, "Imágenes de proyecto", class: 'col-xs-2 file-input'
       .col-xs-8
         = f.file_field :imagenes, multiple: true
         %br
         #test

这就是触发

$(function(){
     $(".file-input").change(function(){
        readURL(this);
     });
})

你的功能：

var readURL = function(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#test').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

LE：我不建议你也添加javascript的样式，除非你别无选择。

相关文章：