Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to read and write local files in HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Recently, there is a requirement that there is a button in the html page to export, click it, and a document will be constructed and stored in the local file system. There is also a button that you click to read a file from the local file system and analyze the contents.

To put it bluntly, it is one thing, that is, how to read or write files in the local file system.

This thing was very scary before html5, because the browser has a very strong protection to the local file system, it seems to be a mechanism called sandboxie, in short, js can not directly operate it. So, at this time, if you want to read a file, you need to upload the file to the server, then the server reads and parses the file, and returns the parsing result to the client. Writing a file is a little easier. Js can't write it, so the server can only dynamically generate a file and download it (attachment). But this is actually very unreasonable. Because it is the js engine that manipulates this file, but it also needs to go through a server in the middle.

Html5 came to provide a set of file system API, which can read and write files. I am curious that this requirement may be very common, but there is very little Demo on the Internet. So, I cleaned it up by myself.

File reading

The API to be used for file reading is FileReader, and the elements in html are:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.