So lesen Sie lokale Dateien in HTML

Lesen Sie in HTML lokale Dateien über die Datei-API. Die Schritte umfassen: Erstellen Sie einen Dateiselektor mit dem <input>-Element. Fügen Sie der Dateiauswahl einen Ereignis-Listener hinzu. Verwenden Sie im Ereignishandler ein FileReader-Objekt, um die Datei zu lesen. Nach erfolgreichem Lesen enthält das Ergebnisattribut den Dateiinhalt und kann bei Bedarf verarbeitet werden.

So lesen Sie lokale Dateien mit HTML

In HTML erfolgt das Lesen lokaler Dateien hauptsächlich über die Datei-API. Die Datei-API ist eine Reihe von JavaScript-APIs, die es Webseiten ermöglichen, Dateien von Benutzergeräten zu lesen.

Erforderliche Schritte:

1. Erstellen Sie einen Dateiselektor mit dem Element <input>: <input> 元素创建文件选择器：

   <input type="file">

<input type="file">

2. Fügen Sie einen Ereignis-Listener zur Dateiauswahl hinzu:

3. <code class="javascript">const input = document.querySelector('input[type="file"]');
   input.addEventListener('change', handleFileSelect);</code>

   Lesen Sie die Datei im Ereignishandler:

<code class="javascript">function handleFileSelect(event) {
  const files = event.target.files;
  const reader = new FileReader();
  reader.onload = function() {
    // 读取成功后，`result` 属性将包含文件的内容。
    const content = reader.result;

    // 对文件内容执行所需的处理。
  };
  reader.readAsText(files[0]);
}</code>

Beispielcode:

<code class="html"><form>
  <input type="file" id="file-input">
  <button type="submit">读取文件</button>
</form>

<script>
  const input = document.querySelector('input[type="file"]');

  input.addEventListener('change', function(event) {
    const files = event.target.files;
    const reader = new FileReader();

    reader.onload = function() {
      const content = reader.result;

      console.log(content);
    };

    reader.readAsText(files[0]);
  });
</script></code>

Hinweise:

• Datei-API funktioniert nur mit HTML5-Browsern.
• Das Lesen lokaler Dateien erfordert eine ausdrückliche Genehmigung des Benutzers.
• Browser haben bestimmte Beschränkungen für Dateigrößen und -typen.

Verwenden Sie die Datei-API mit Vorsicht, da sie Sicherheitsrisiken birgt. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo lesen Sie lokale Dateien in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!