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

通过对逻辑进行一些更改，您可以实现此目的。首先，您需要删除除{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();
});

为每个输入文件

1 个答案: