首次实现拖拽FileReader()事件，无法读取txt文件内容求助

Hey there! Let's work through why your drag-and-drop setup isn't reading .txt files and displaying their content in your display area. This is a super common set of pitfalls with HTML5 drag events and the FileReader API, so let's break it down and fix it.

Common Issues Likely Blocking Your Code #

• You didn't prevent default drag behaviors: When you drag a file into the browser, the default action is to open the file directly—so your code never gets a chance to handle it. You need to override this in both the dragover and drop events.
• FileReader is asynchronous, and you might not be waiting for it: You can't just read the result immediately after calling readAsText(); you have to listen for the load event to fire when the file is fully read.
• You might not be grabbing the file correctly: The dropped file lives in event.dataTransfer.files—you need to pull it from there to pass to FileReader.

Fixed Code Example #

Here's a working version that addresses all these issues:

HTML #

<div id="dropzone" style="border: 2px dashed #ccc; padding: 2rem; text-align: center; cursor: pointer;">Drop your .txt file here</div>
<div id="displayarea" style="margin-top: 2rem; padding: 1rem; border: 1px solid #ddd; min-height: 50px;"></div>

JavaScript #

const dropzone = document.getElementById('dropzone');
const displayarea = document.getElementById('displayarea');

// Handle drag-over to give visual feedback and prevent default behavior
dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
  dropzone.style.borderColor = '#2ecc71'; // Highlight dropzone when file is over it
});

// Reset dropzone style when file leaves the area
dropzone.addEventListener('dragleave', () => {
  dropzone.style.borderColor = '#ccc';
});

// Handle the actual file drop
dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  dropzone.style.borderColor = '#ccc';

  // Grab the first dropped file (adjust if you want multiple files)
  const file = e.dataTransfer.files[0];
  if (!file) return;

  // Validate it's a .txt file (either by MIME type or file extension)
  if (file.type === 'text/plain' || file.name.toLowerCase().endsWith('.txt')) {
    const reader = new FileReader();

    // When the file finishes loading, display its content
    reader.addEventListener('load', () => {
      displayarea.textContent = reader.result; // Use textContent to avoid HTML injection
    });

    // Read the file as plain text
    reader.readAsText(file);
  } else {
    displayarea.textContent = "Oops! Please drop a .txt file only.";
  }
});

Key Fixes Explained #

1. Prevent Default Actions: The dragover and drop events both call e.preventDefault() and e.stopPropagation() to stop the browser from opening the file automatically.
2. Async Handling: We listen for the FileReader's load event—this is when the file content is ready to be accessed via reader.result.
3. File Validation: We check if the file is a text file (either via MIME type or file extension) to give users clear feedback if they drop the wrong type of file.
4. Visual Feedback: Added border color changes to let users know when the dropzone is active, which improves the overall experience.

内容的提问来源于stack exchange，提问作者FlipCoder