拖放多个文件只需先

Question

我对图像进行了简单的拖放操作，预览如下所示。

期望的行为应该是只选择一张图像并预览它。只要浏览图像或丢下一张图像，此方法就可以正常工作。

当试图丢弃多个图像时会出现问题。我只想拍摄第一个图像，而放弃所有其他图像，但是由于只读文件列表，我被卡住了。所以到目前为止，我在drop handler中有这个警报，但是我想摆脱它。有什么解决方法吗？

$('.drag-drop').wrap("<label class='dropZone'></label>");
$('.drag-drop').after("<img>");
$('.drag-drop').after("<div title='No file chosen'>"+$('.drag-drop').attr('data-text')+"</div>");
$('.drag-drop').prop("hidden",true);
$(".drag-drop").change(function(){
  if(this.files && this.files[0]){
    var e = $(this);
    e.siblings('div').hide();
    var reader = new FileReader();
    reader.onload = function(ev) {e.siblings('img').attr('src', ev.target.result);}
    reader.readAsDataURL(this.files[0]);
  }
});
$('.dropZone').on("dragenter dragover dragstart dragend",function(e){e.preventDefault();});
$('.dropZone').on({
  drop:function(ev){
    ev.preventDefault();
    if(ev.originalEvent.dataTransfer.files.length != 1){
    	alert("Please drop only 1 file!");
    }else{
      $(this).css("border-style","dashed");
      $(this).children('input')[0].files = ev.originalEvent.dataTransfer.files;
    }
  },
  dragenter:function(){
    $(this).css("border-style","solid");
  },
  dragleave:function(){
    $(this).css("border-style","dashed");
  }
});

.dropZone{
  display:table;
  margin:1rem;
  font-size:2rem;
  border-radius:.25rem;
  border:1px dashed;
  background-color:#e8e8e8;
}
.dropZone:active{
  border-style:solid;
}
.dropZone img{
  max-width:21rem;
  max-height:13rem;
}
.dropZone div{
  width:21rem;
  height:13rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="drag-drop" data-text="Drop here..." accept="image/jpeg, image/png">

我的小提琴：http://jsfiddle.net/aq9Laaew/249920/