javascript - 我们可以为拖放/选择文件编写相同的代码吗

Question

我为拖放写了两个独立的JavaScript代码 并选择文件

我们可以为两个事件编写一个代码吗...

因为如果我使用拖放和浏览文件上传文件，文件会出现两次..

谁能帮忙？

//for drag and drop
function dropHandler(ev) {

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    if (ev.dataTransfer.items.length === 0) {
      document.getElementById('files').innerHTML = 'No files are selected'
    } else if (ev.dataTransfer.items.length == 1) {
      // Use DataTransferItemList interface to access the file(s)
      for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (ev.dataTransfer.items[i].kind === 'file') {
          var file = ev.dataTransfer.items[i].getAsFile();
          console.log('... file[' + i + '].name = ' + file.name);

        }
        document.getElementById('files').innerHTML += file.name + ' <br/>';
      }
    } else {
      document.getElementById('files').innerHTML = ev.dataTransfer.items.length + ' files are selected <br/>';
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);

    }
  }

  // Pass event to removeDragData for cleanup
  removeDragData(ev)
}

function dragOverHandler(ev) {
  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function removeDragData(ev) {
  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to remove the drag data
    ev.dataTransfer.items.clear();
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}
// for browse file
var file = document.getElementById("choosefile");
file.addEventListener('change', updateFiles);

function updateFiles() {

  var curFiles = file.files;
  if (curFiles.length === 0) {
    document.getElementById('files').innerHTML = 'No files currently selected for upload';
  } else if (curFiles.length === 1) {
    for (var i = 0; i < curFiles.length; i++) {
      var para = document.createElement('p');
      para.textContent = curFiles[i].name;
      document.getElementById('files').appendChild(para);
    }
  } else {
    document.getElementById('files').innerHTML = curFiles.length + ' files are selected';
  }
}

function returnFileSize(number) {
  if (number < 1024) {
    return number + 'bytes';
  } else if (number >= 1024 && number < 1048576) {
    return (number / 1024).toFixed(1) + 'KB';
  } else if (number >= 1048576) {
    return (number / 1048576).toFixed(1) + 'MB';
  }
}

#choosefile {
  display: none
}

<div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  <div class="aa">
    <p class="status2">Drag and drop any attachments</p>
    <p id="files"></p>
  </div>
  <div class="row justify-content-center" id="label1">
    <label for="choosefile">Or Browse files here</label>
    <input type="file" id="choosefile" multiple>
  </div>
</div>

Answer 1

//for drag and drop
function dropHandler(ev) {

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    if (ev.dataTransfer.items.length === 0) {
      document.getElementById('files').innerHTML = 'No files are selected'
    } else if (ev.dataTransfer.items.length == 1) {
      // Use DataTransferItemList interface to access the file(s)
      for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (ev.dataTransfer.items[i].kind === 'file') {
          var file = ev.dataTransfer.items[i].getAsFile();
          console.log('... file[' + i + '].name = ' + file.name);

        }
        document.getElementById('files').innerHTML = file.name + ' <br/>';
      }
    } else {
      document.getElementById('files').innerHTML = ev.dataTransfer.items.length + ' files are selected <br/>';
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);

    }
  }

  // Pass event to removeDragData for cleanup
  removeDragData(ev)
}

function dragOverHandler(ev) {
  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function removeDragData(ev) {
  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to remove the drag data
    ev.dataTransfer.items.clear();
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}
// for browse file
var file = document.getElementById("choosefile");
file.addEventListener('change', updateFiles);

function updateFiles() {

  var curFiles = file.files;
  if (curFiles.length === 0) {
    document.getElementById('files').innerHTML = 'No files currently selected for upload';
  } else if (curFiles.length === 1) {
    document.getElementById('files').innerHTML = curFiles[0].name;
  } else {
    document.getElementById('files').innerHTML = curFiles.length + ' files are selected';
  }
}

function returnFileSize(number) {
  if (number < 1024) {
    return number + 'bytes';
  } else if (number >= 1024 && number < 1048576) {
    return (number / 1024).toFixed(1) + 'KB';
  } else if (number >= 1048576) {
    return (number / 1048576).toFixed(1) + 'MB';
  }
}

#choosefile {
  display: none
}

<div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  <div class="aa">
    <p class="status2">Drag and drop any attachments</p>
    <p id="files"></p>
  </div>
  <div class="row justify-content-center" id="label1">
    <label for="choosefile">Or Browse files here</label>
    <input type="file" id="choosefile" multiple>
  </div>
</div>