How to Use the HTML5 File API to Read User Files? (JavaScript Example)

使用HTML5 File API读取用户文件需三步：1. 通过<input type="file">捕获选择；2. 从event.target.files获取FileList；3. 用FileReader或URL.createObjectURL处理文件，全程客户端完成。

To read user files in the browser using the HTML5 File API, you need to let users select files (typically via an <input type="file">), then use JavaScript to access and process them — no server round-trip required.

1. Capture file selection with an input element

Add a file input to your page. Use the multiple attribute if you want to allow more than one file, and consider limiting types with accept:

<input type="file" id="fileInput" accept=".txt,.json" multiple>

Then listen for the change event — it fires when the user selects one or more files:

document.getElementById('fileInput').addEventListener('change', handleFiles);

2. Access files via the FileList object

In your event handler, the selected files are available as event.target.files, which is a FileList (array-like but not an array). You can loop through it:

function handleFiles(event) {
  const files = event.target.files; // FileList
  for (let i = 0; i 

• Each File object inherits from Blob, so it has size, type, and name
• No direct file system path is exposed — this is intentional for security
• You can’t read or modify the raw file on disk — only read its contents in memory

3. Read file content with FileReader

Use FileReader to load file data asynchronously. It supports reading as text, data URL, binary string, or ArrayBuffer:

function readFile(file) {
  const reader = new FileReader();
  
  reader.onload = function(e) {
    console.log('Content:', e.target.result); // e.g., plain text
  };
  
  reader.onerror = function() {
    console.error('Failed to read file');
  };
  
  reader.readAsText(file); // or readAsDataURL(), readAsArrayBuffer(), etc.
}

• readAsText() is ideal for UTF-8 text files (like .txt, .json)
• readAsDataURL() returns a base64-encoded string — useful for previewing images
• Always handle onload and onerror; FileReader is asynchronous

4. Optional: Preview image files directly

If you're handling images, you can skip decoding and use URL.createObjectURL() for instant previews:

function previewImage(file) {
  if (!file.type.match('image.*')) return;
  
  const img = document.createElement('img');
  img.src = URL.createObjectURL(file);
  img.onload = () => URL.revokeObjectURL(img.src); // clean up memory
  document.body.appendChild(img);
}

• Faster than FileReader for display-only use
• Call URL.revokeObjectURL() after loading to avoid memory leaks
• Works even before upload — great for drag-and-drop or instant feedback

Basically just three steps: get the file(s), pick a reading method, and handle the result. No plugins, no backend needed — all client-side and secure.

The above is the detailed content of How to Use the HTML5 File API to Read User Files? (JavaScript Example). For more information, please follow other related articles on the PHP Chinese website!