为每个输入文件选择多个图像答案

【问题标题】：Select multiple images to each input file为每个输入文件选择多个图像
【发布时间】：2018-07-11 15:47:04
【问题描述】：

我有 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
}

});

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

【问题讨论】：

您无法以编程方式设置文件输入的值，因此您的要求是不可能的。您将需要删除输入上的multiple 属性并强制用户单独选择每个文件。
@RoryMcCrossan 但是我看到很多网站都是这样做的，也使用了multiple，所以有可能。
你有这些网站的例子吗？
即使用单个 multiple 文件输入，然后为其包含的每个文件附加新的 li 元素。它没有使用不同的 input type="file" 控件并更新它们，因为正如我在第一条评论中提到的那样，这是不可能的。
当然，您可以遍历 files 集合以创建元素并将它们附加到 DOM，例如 this。您还可以通过将$(this)[0].files <= 3 置于if 条件中来将选择限制为3 个文件。

标签： javascript jquery html

【解决方案1】：

通过对您的逻辑进行一些更改，您可以实现这一目标。首先，您需要删除所有 input 除了第一个，然后添加 multiple 属性，然后像 @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();
});

【讨论】：