Как сделать если прикрепляешь с зажатой клавишой ctrl, то несколько, а если без то только одно изображение?

Question

[rusgayfer]

Суть в том, что когда выбираешь изображения с зажатой клавишой ctrl, то добавляется несколько, а если без клавиши, то по одному, но превью остаются, а загружается только одно последнее изображение.

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#basicUploadFile").on("change", function(e) {
	  var n = 0;
      var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < 10; i++) { // Максимальное количество изображений 10
		
		if (filesLength > 10 ) {
	   $('#result').html('Вы не можете прикрепить более 10 вложений к одной записи.');
       $('#confirm').prop('disabled', true);
	   $('#fupload').prop('disabled', true);
	   $('#basicUploadFile').prop('disabled', true);
	   
	   }
		
	   if(filesLength >= 10) {
	  $('#fupload').prop('disabled', true);
	   $('#basicUploadFile').prop('disabled', true);
	   }
	
		    // Добавляем изображения
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
            var file = e.target;
            $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + files[n].name + "\"/>" +
            "<br/><span class=\"remove\">×</span>" +
            "</span>").insertAfter("#result");
			
			// Удаляем изображения
            $(".remove").click(function(){
            $(this).parent(".pip").remove();
			$('#result').html("");
	        $("#basicUploadFile")[0].value = "";
			$('#confirm').prop('disabled', false);
	        $('#fupload').prop('disabled', false);
	        $('#basicUploadFile').prop('disabled', false);
          });
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Ваш браузер не поддерживает File API")
  }
});

<input type="file" name="files[]" multiple accept="image/jpeg, image/png, image/gif" title="Прикрепить изображения" id="basicUploadFile">

Comments

[rusgayfer]

Типо такое нужно, но это не работает

// Если несколько, то отображем несколько
			if(files[1].name) {
			$("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + files[n].name + "\"/>" +
            "<br/><span class=\"remove\">×</span>" +
            "</span>").insertAfter("#result");
			} else {
// если одна, то отображаем одну, при добавлении заменяем
			$("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + files[0].name + "\"/>" +
            "<br/><span class=\"remove\">×</span>" +
            "</span>").insertAfter("#result");				
			}

Answer 1

[Александр]

В переменную сохранять состояние ctrl из keydown / keyup
https://developer.mozilla.org/en-US/docs/Web/Event...
при копировании проверять сохраненное состояние и действовать в зависимости от этого )