html5 文件读取-浏览器保存文件api_使用HTML5文件API在浏览器中本地处理文件

bendan520 html5

2023-08-26 0 7,405 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

浏览器保存文件api

我最近遇到了一个我正在做的有问题的项目。需要用户能够将图像加载到浏览器中，对其进行一些编辑，然后在对编辑感到满意后上传。

最近，我在做一个项目时遇到了一个问题。我需要用户能够将图像加载到浏览器中，对其进行一些编辑，然后在对编辑满意时上传它。

一种老式的做法是：

更老式的方法是：

两次访问服务器？这对我来说似乎在医学上很有效，我做了更多研究，发现了 HTML5 文件 API。

两次访问服务器？不过，这对我来说似乎效率很低，所以我做了更多研究并发现了 HTML5FileAPI。

HTML5 文件 API 有哪些？（什么是 HTML5 文件 API？）

HTML5 文件 API 允许您创建让用户与本地文件交互的应用程序。基本上，您可以加载文件并在浏览器中渲染，而无需实际上传文件。

HTML5FileAPI 允许您创建允许用户与本地文件交互的应用程序。基本上，您可以加载文件并在浏览器中呈现它们，而无需实际上传它们。

3 个主要 HTML5 文件对象 (3MainHTML5FileObjects)

要在本地处理文件，您需要了解三个主要对象：

在本地处理文件时，需要了解三个主要对象：

文件-带有一些元数据的单个文件对象

file - 具有单独元数据的单个文件对象

FileList - 文件对象的简单列表。

FileReader - 用于读取文件的对象html5 文件读取，具有多种方法和事件处理程序以与文件交互。

FileReader - 用于读取文件的对象，具有多种与文件交互的方法和处理程序。

使用 JavaScript 访问文件 (AccessingAFileUsingJavaScript)

当您使用 HTML 文件输入选择文件时，可以访问文件列表。这是一些处理文件输入的示例代码。我们会安慰。 log() 以便我们可以看到输入为我们提供了什么。

使用 HTML 文件输入选择文件时可以访问文件列表。这是一些处理文件输入的示例代码。我们使用 console.log() 来查看输入为我们提供了什么。

选择单个文件（SelectaSingleFile）

// detect a change in a file input with an id of “the-file-input”
$("#the-file-input").change(function() {
    // will log a FileList object, view gifs below
    console.log(this.files);
});

选择多个文件 (SelectingMultipleFiles)

在浏览器中渲染文件（在浏览器中渲染文件）

现在我们知道如何访问 FileList 对象html5 文件读取，剩下的就是在浏览器中渲染文件了。为此，我们将其中一个 File 对象输入文件读取器以生成可用作 srcinan 图像元素的本地 URL。

现在我们知道如何访问 FileList 对象，剩下要做的就是在浏览器中呈现文件。我们通过将 File 对象之一传递到 FileReader 中来生成本地 URL，该 URL 可以用作图像元素中的 src。

// render the image in our view
function renderImage(file) {
  // generate a new FileReader object
  var reader = new FileReader();
  // inject an image with the src url
  reader.onload = function(event) {
    the_url = event.target.result
    $('#some_container_div').html("")
  }
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(file);
}
// handle input changes
$("#the-file-input").change(function() {
    console.log(this.files)
    // grab the first image in the FileList object and pass it to the function
    renderImage(this.files[0])
});

通过这个简单的代码，我们无需访问服务器即可抓取并显示图像！这很棒，因为当我们有大量用户上传我们非常受欢迎的应用程序时，它可以减轻我们服务器上的负载。

通过这个简单的代码，我们可以在不浏览服务器的情况下获取并显示图像！这很棒，因为当我们有大量用户上传到我们非常流行的应用程序时，它可以减少服务器上的负载。

冷却器演示 (ACoolerDemo)

我在 CodePen 上制作了一个更酷的演示，它实际上展示了一个示例视频。请务必在这里检查一下。

我在 CodePen 上做了一个更酷的演示，实际上演示了一个示例视频。请务必在这里检查一下。