CODEWITHSUNDEEP
javascriptjqueryhtml
Padideh
Padideh

Reputation: 149

Select multiple images to each input file

I have 3 input[type="file"] allow user upload 3 images, and user only can select 3 images on each input, but what I trying to implement is:

Consider user click on first input, now user can select 1 image, but if user select 2 or 3 image I want to send second or third image to next inputs. For example if user click on first input, and select 3 images, first image should set on first input, second should set on second input and also third to third input. Also if click second or third input, it should send each image to each input file.

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>

This is what I tried so far:

$.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
}

});

But no idea how should send value to each related input. Any idea?

Upvotes: 0

Views: 6132

Answers (1)

Pedram
Pedram

Reputation: 16575

With some change in your logic you can achieve this. First you need to remove all input except first one then add multiple attribute, then create your preview and value dynamically like what @Rory said in comment but you need a loop to create element for each image but 3 times.

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/>

Extra note: For better UI experience you can create 3 element like li then replace each image with that li and hide input[type="file"] and trigger it by something like this:

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

Upvotes: 2

Related Questions