浏览器保存文件api

I recently came across a problem in a project that I was working on. I needed the user to be able to load an image into the browser, make a few edits to it, and then upload after they were pleased with the edits.

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

A more old fashioned way of doing this would be to:

一种更老式的方法是：

• Upload your image via AJAX
  通过AJAX上传图片
• Render the uploaded image in the browser
  在浏览器中渲染上传的图像
• Make edits using JavaScript
  使用JavaScript进行编辑
• Make another request with data on how to process the image and
  再次提出有关如何处理图像和
• Apply the changes on the server
  在服务器上应用更改

Two trips to the server? That seemed inefficient to me so I researched a little bit more and discovered the .

两趟服务器？ 这对我来说似乎效率很低，所以我进行了更多研究并发现了 。

什么是HTML5文件API？ (What is the HTML5 File API?)

The HTML5 File API allows you to create applications that let the user interact with files locally. Basically, you can load files and render them in the browser without actually having to upload the files.

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

3个主要HTML5文件对象 (3 Main HTML5 File Objects)

There are three main objects that you need to know about to work with files locally:

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

- A single file object with some metadata

-具有某些元数据的单个文件对象

- Simply a list of file objects.

简单的文件对象列表。

- An object to read files with a number of methods and event handlers to interact with them.

一个对象，用于读取具有许多方法和事件处理程序以与它们进行交互的文件。

使用JavaScript访问文件 (Accessing A File Using JavaScript)

A file list can be accessed when you select a file using an HTML file input. Here is some sample code to handle file inputs. We will console.log() so that we can see what the input is providing us.

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

选择一个文件 (Select a Single File)

// 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);});

选择多个文件 (Selecting Multiple Files)

在浏览器中渲染文件 (Rendering the File in Browser)

Now that we know how to access the FileList object, all that is left to do is to render the file in the browser. We do this by feeding one of the File objects into a FileReader to generate a local url that can be used as the src in an image element.

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

// render the image in our viewfunction 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])});

With this simple code, we are able to grab and display an image without a trip to the server! This is great since it lessens the load on our server when we have a giant amount of users uploading to our incredibly popular application.

通过此简单的代码，我们无需浏览服务器即可获取和显示图像！ 这非常好，因为当我们有大量用户上传到我们非常受欢迎的应用程序时，它减轻了服务器的负载。

更酷的演示 (A Cooler Demo)

There is a much cooler demo, that I made on CodePen, that actually shows an example video. Make sure you check it out here.

我在CodePen上做了一个更酷的演示，实际上演示了一个示例视频。 确保在这里签出。

See the Pen by Spencer Cooley () on .

见笔斯宾塞库利（ ）上 。

The CodePen demo will also give you a closer look at some other attributes that you can grab from the file object such as the file size and name.

CodePen演示还将使您更仔细地了解可以从文件对象中获取的其他一些属性，例如文件size和name 。

结论 (Conclusion)

Just like that, we are able to view files in browser without the server having to do any work. This helps our application performance overall and opens up lots of different things we can build like image editors.

像这样，我们可以在浏览器中查看文件，而无需服务器做任何工作。 这有助于提高应用程序的整体性能，并打开我们可以构建的许多不同内容，例如图像编辑器。

翻译自:

浏览器保存文件api