掌握 JavaScript 中的文件 API：简化 Web 应用程序的文件处理-js教程-PHP中文网

掌握 JavaScript 中的文件 API：简化 Web 应用程序的文件处理

Susan Sarandon

发布： 2024-12-23 00:31:24

原创

265 人浏览过

Mastering File APIs in JavaScript: Simplified File Handling for Web Applications

在 JavaScript 中使用文件 API

JavaScript 中的文件 API 允许开发人员在客户端与文件交互，而无需服务器。此 API 对于构建处理文件上传、预览或直接在浏览器中处理的应用程序特别有用。

1.文件 API 的核心功能

文件 API 包括多个有助于处理文件的接口：

File：表示文件对象并提供名称、类型和大小等信息。
FileList：表示 File 对象的集合。
FileReader：异步读取文件内容。
Blob（二进制大对象）：表示可以读取或写入的不可变原始数据。

2.使用访问文件

与文件交互的最简单方法是通过元素。

示例：

<input type="file">




<hr>

<h3>
  
  
  <strong>3. Reading Files with FileReader</strong>
</h3>

<p>The FileReader API allows reading the contents of files as text, data URLs, or binary data.  </p>

<h4>
  
  
  <strong>Methods of FileReader</strong>:
</h4>

<ul>
<li>
readAsText(file): Reads the file as a text string.
</li>
<li>
readAsDataURL(file): Reads the file and encodes it as a Base64 data URL.
</li>
<li>
readAsArrayBuffer(file): Reads the file as raw binary data.</li>
</ul>

<h4>
  
  
  <strong>Example: Reading File Content as Text</strong>
</h4>



<pre class="brush:php;toolbar:false"><input type="file">



<h4>
  
  
  <strong>Example: Displaying an Image Preview</strong>
</h4>



<pre class="brush:php;toolbar:false"><input type="file">




<hr>

<h3>
  
  
  <strong>4. Drag-and-Drop File Uploads</strong>
</h3>

<p>Drag-and-drop functionality enhances the user experience for file uploads.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<h3>
  
  
  <strong>5. Creating and Downloading Files</strong>
</h3>

<p>JavaScript allows creating and downloading files directly in the browser using Blob and URL.createObjectURL.  </p>

<p><strong>Example: Creating a Text File for Download</strong><br>
</p>

<pre class="brush:php;toolbar:false"><button>




<hr>

<h3>
  
  
  <strong>6. File Validation</strong>
</h3>

<p>Before processing a file, it's important to validate its type, size, or other properties.  </p>

<p><strong>Example:</strong> Validate File Type and Size<br>
</p>

<pre class="brush:php;toolbar:false">const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", event => {
  const file = event.target.files[0];
  const allowedTypes = ["image/jpeg", "image/png"];
  const maxSize = 2 * 1024 * 1024; // 2 MB

  if (!allowedTypes.includes(file.type)) {
    console.error("Invalid file type!");
  } else if (file.size > maxSize) {
    console.error("File size exceeds 2 MB!");
  } else {
    console.log("File is valid.");
  }
});

登录后复制