Javascript 如何防止此多个拖放图像文件重复

这里有3个div，来自我的拖放图像文件，文件名是array，我使用类调用它，然后循环它。我的问题是，当我尝试将图像文件放入特定的div（这3个div中的一个）时，它会将图像复制到所有剩余的div。如何防止这种情况，并允许我仅将图像放入所选的div中

这是我的密码

Html

在此处单击或拖动图像
在此处单击或拖动图像
在此处单击或拖动图像

JS

$（文档）。在（'单击'，'上。拖动我'，函数（）{
$（'.file_class'）。触发器（'click'）；
});
var imageLoader=document.getElementsByName（'file_name[]）；
对于（var i=0；i1500000）{
$（'.trigger\u danger\u alert\u changable'）.show（）.delay（5000.fadeOut（）；
$（'#palitan_ng_text'）.html（'文件大小太大'）；
$（'.file_class'）.val（''）；//1500000）{
$（'.trigger\u danger\u alert\u changable'）.show（）.delay（5000.fadeOut（）；
$（'#palitan_ng_text'）.html（'文件大小太大'）；
返回false；
}否则{
对于（var i=0；i
不要对多个元素使用相同的
id
s
不推荐使用
标记。最好在类中使用
style=“text align:center；”“
现在谈谈您的实际问题，它由两部分组成：


此行将
event.target.result
分配给每个
元素的
src
属性。将\u me.img\u拖到此处
元素


这会导致单击任何
。拖动我
元素以触发对每个
文件类
元素的单击


这两个问题都可以通过不对不同的元素使用相同的
id
s来解决，然后引用这些
id
s来指定要针对的单个元素：

HTML：注意
元素的新
id
s。拖拽
和
文件类
元素

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_0">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_0">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_1">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_1">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_2">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_2">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>


$(document).on('click','.drag_me', function(){
    $('.file_class').trigger('click');
});


var imageLoader = document.getElementsByName('file_name[]');
for(var i= 0; i < imageLoader.length; i++){
    imageLoader[i].addEventListener('change', handleImage, false);
}


function handleImage(e) {
    e.stopPropagation();
    e.preventDefault();


    if(e.target.files.length === 0){
        return false;
    }
    var reader = new FileReader();
    reader.onload = function (event) {
        $('.drag_me .img_here').attr('src',event.target.result);
    }

    var taste_it = e.target.files[0];

    var file_name = taste_it.name;
    var file_size = taste_it.size;
    var file_type = taste_it.type;
    if(!check(file_type)){
        $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
        $('#palitan_ng_text').html('Invalid file format');
        return false;
    }
    if(file_size > 1500000){
        $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
        $('#palitan_ng_text').html('File size too large');
        $('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
        return false;
    }else{

             reader.readAsDataURL(e.target.files[0]);
                 $('.center_html').hide();
                 $('.image_name').html(file_name).css({'font-size' : '14px', 'color' : 'black'});

    }
 }

var obj = $('.drag_me');

obj.on('dragover', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #39ADCD');

});



obj.on('drop', function(e){
   e.stopPropagation();
   e.preventDefault();
   $(this).css('border', '2px dotted #39ADCD');

   var files = e.originalEvent.dataTransfer.files;
   var file = files[0];

   var file_name = file.name;
   var file_size = file.size;
   var file_type = file.type;
if(!check(file_type)){
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('Ivalid file format');
    return false;
}

if(file_size > 1500000){
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('File size too large');
    return false;
}else{


            for(var i = 0; i<imageLoader.length; i++){
                imageLoader[i].files = files;
            }   
            $('.center_html').html(file_name).css({'font-size' : '14px', 'color' : 'black'});




}

});
function check(image){
    switch(image){
       case 'image/jpeg':
       return 1;
        case 'image/jpg':
       return 1;
       case 'image/png':
        return 1;
        case 'image/gif':
        return 1;
       default:
       return 0;
  }
 }

$('.drag_me .img_here').attr('src', event.target.result);

$(document).on('click','.drag_me', function(){
    $('.file_class').trigger('click');
});

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_0">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_0">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_1">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_1">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_2">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_2">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

$(document).on('click', '.drag_me', function(ev) {
  /**** Get the specific element using the number in the id attribute ****/
  var idNum = $(this).attr('id').split('_')[3];
  $('.file_class').eq(idNum).trigger('click');
});


var imageLoader = document.getElementsByName('file_name[]');
for (var i = 0; i < imageLoader.length; i++) {
  imageLoader[i].addEventListener('change', handleImage, false);
}


function handleImage(e) {
  e.stopPropagation();
  e.preventDefault();

  /**** Get the current input field by using the number in the id attribute ****/
  var currentInput = e.target.id.split('_')[2];

  if (e.target.files.length === 0) {
    return false;
  }
  var reader = new FileReader();
  reader.onload = function(event) {
    /**** Use the current input field instead of all the input fields ****/
    $('#drag_me_id_' + currentInput + ' .img_here').attr('src', event.target.result);
  }

  var taste_it = e.target.files[0];

  var file_name = taste_it.name;
  var file_size = taste_it.size;
  var file_type = taste_it.type;
  if (!check(file_type)) {
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('Invalid file format');
    return false;
  }
  if (file_size > 1500000) {
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('File size too large');
    $('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
    return false;
  } else {

    reader.readAsDataURL(e.target.files[0]);
    $('.center_html').hide();
    $('.image_name').html(file_name).css({
      'font-size': '14px',
      'color': 'black'
    });

  }
}

/** Rest of the code is unchanged **/