javascript - 为每个输入文件选择多个图像

Question

我有3个input[type="file"]允许用户上传3张图片，并且用户只能在每个输入上选择3张图片，但我试图实现的是:

考虑用户单击第一个输入，现在用户可以选择 1 个图像，但如果用户选择 2 或 3 个图像，我想将第二个或第三个图像发送到下一个输入。例如，如果用户单击第一个输入，并选择 3 个图像，则第一个图像应在第一个输入上设置，第二个图像应在第二个输入上设置，第三个到第三个输入也应设置。此外，如果单击第二个或第三个输入，它应该将每个图像发送到每个输入文件。

function imgToData(input) {
  if (input.files && input.files[0]) {

    var File = new FileReader();
    File.onload = function() {
      var Img = new Image();

      Img.onload = function() {
        $('#' + input.id + '-val').val(Img.src);
        $('#' + input.id + '-preview').attr('src', Img.src).css('visibility', 'visible').fadeIn();
      };
      Img.src = File.result;
    };

    File.readAsDataURL(input.files[0]);
  }
}

$("input[type='file']").each(function() {
  $(this).change(function() {
    if (parseInt($(this).get(0).files.length) > 3) {
      alert("You can only upload a maximum of 3 images");
    } else {
      imgToData(this);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="file" id="img-1" multiple/>
  <input type="text" id="img-1-val" />
  <img id="img-1-preview" width="30" />
</div>

<div>
  <input type="file" id="img-2" multiple/>
  <input type="text" id="img-2-val" />
  <img id="img-2-preview" width="30" />
</div>

<div>
  <input type="file" id="img-3" multiple/>
  <input type="text" id="img-3-val" />
  <img id="img-3-preview" width="30" />
</div>

这是我到目前为止尝试过的:

$.each($(this)[0].files, function(i,v){
if(i==0){
// go to input 1
} else if(i==1){
// go to input 2
} else if(i==2){
// go to input 3
}

});

但不知道如何向每个相关输入发送值。有什么想法吗？

Answer 1

通过改变你的逻辑，你可以实现这一目标。首先，您需要删除除第一个输入之外的所有输入，然后添加多个属性，然后动态创建预览和值，就像 @Rory 在评论中所说的那样但是您需要一个循环来为每个图像创建元素但 3 次。

function imgToData(input) {
  if ($('img').length < 3) {
    if (input.files) {

      var length = input.files.length;
      if (length <= 3) {
        $.each(input.files, function(i, v) {
            var n = i + 1;
            var File = new FileReader();
            File.onload = function(event) {
              $('<img/>').attr({
                src: event.target.result,
                class: 'img',
                id: 'img-' + n + '-preview',
              }).appendTo('body');

              $('<input/>').attr({
                type: 'text',
                value: event.target.result,
                id: 'img-' + n + '-val'
              }).appendTo('body');
            };

            File.readAsDataURL(input.files[i]);
          });
        }
        else {
          alert('Only 3 images allowed!');
        }
      }
    } else {
      alert('Only 3 images allowed!');
    }
  }


  $('input[type="file"]').change(function(event) {
    imgToData(this);
  });

.img {
  height: 100px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="upload" multiple/>

额外说明:为了获得更好的 UI 体验，您可以创建 3 个元素，例如 li，然后用该 li 替换每个图像并隐藏 input[type="file"] 并通过如下方式触发它:

$('#UploaderDiv').click(function(){
  $('#upload').click();
});