Read Local Files with JavaScript without Backend | JavaScript in Plain English
source link: https://javascript.plainenglish.io/read-local-files-on-the-web-without-backend-5f3fa3ae5c14
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Read Local Files with JavaScript without Backend
Using Pure JS | No Library needed
This short article shows a simple way to use pure JS to interact with user local files without the need to transfer the data across the network. This method is available in most chromium web browsers like Google Chrome, MS Edge, etc.
Example 1: Read Files & their Metadata
The following example uses a simple HTML input to read the file(s) from user devices and print out file metadata in the browser console.
Example 2: Read Text Files as String (or JSON)
This example includes a function to decode base 64 and a reader event to listen to when the file is read. After the file is loaded, the text result is printed out as a String at the target HTML.
You may include a parse function if your file is JSON, XML, etc.
Live Example on JSFiddle:
Example 3: Read an Image File
This example updates the image source on the HTML page to the user’s uploaded file.
You may include a metadata reader from example 1 to check if the uploaded file is an image.
Live Example on JSFiddle:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK