javascript - 检测文件上传是通过拖动还是常规输入点击

Question

我目前正在尝试创建一个拖放文件 uploader ，其标准选项仅使用常规输入。如果用户单击上传或放入文件，我不确定要写入的目标内容。

我的第一个想法是检查 FileList 是否为空，但这两种方法都会生成一个 FileList。第二个想法是只写两个函数，一个用于输入，一个用于删除，但这似乎我会重复。最后的想法是在 read_file 函数中编写 if 语句。但是，我不确定具体的目标是什么。

任何想法将不胜感激!谢谢!!

https://jsfiddle.net/nick1572/b4xzt8oh/3/

   var uploader = document.querySelector('.uploader');
   var output = document.getElementById('output');
   var file = document.getElementById('file'); 

   file.addEventListener('change', function(event) {
     read_file(event);
   });

   function read_file(event) {
     file = event.target;
     var reader = new FileReader();
     reader.onload = function() {
       var data_url = reader.result;
       output.src = data_url;
     };
     // This will read when the image is dropped.
     //reader.readAsDataURL(event.dataTransfer.files[0]); 
       reader.readAsDataURL(file.files[0]); 

     /*

     Something like this

     if () {
       reader.readAsDataURL(file.files[0]);
     } else if() {
       reader.readAsDataURL(event.dataTransfer.files[0]);
     }
     */


   };

   uploader.addEventListener('dragover', function(e) {
       console.log('drag over');
       e.preventDefault();
   });

   uploader.addEventListener('dragenter', function(e) {
       console.log('drag enter');
       e.preventDefault();
   });

   uploader.addEventListener('dragleave', function() {
       console.log('drag leave');
   });


   uploader.addEventListener('drop', function(event) {
       console.log('drop');
       event.preventDefault();
       read_file(event);
   });

Answer 1

检查event对象的type属性以查看使用了哪个事件。

function read_file(event) {

  file = event.target;
  var reader = new FileReader();

  reader.onload = function() {
    var data_url = reader.result;
    output.src = data_url;
  };

  if (event.type === 'change') {
    reader.readAsDataURL(file.files[0]);
  } else if(event.type === 'drop') {
    reader.readAsDataURL(event.dataTransfer.files[0]);
  }

};