Hướng dẫn upload json file in javascript - tải lên tệp json trong javascript

Sáng nay, một sinh viên của tôi đã hỏi tôi cách sử dụng JavaScript để nhập tệp JSON và làm điều gì đó với dữ liệu trong đó. Tôi nghĩ rằng tôi đã viết một bài viết về nó, bởi vì nó là một tính năng trình duyệt thực sự thú vị!

Nào cùng đào vào bên trong.

Một ví dụ

Đối với bài viết này, chúng tôi sẽ xem xét một yếu tố

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

Nó chứa một trường duy nhất,

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

<form id="upload">
	<label for="file">File to uploadlabel>
	<input type="file" id="file" accept=".json">

	<button>Uploadbutton>
form>

Tôi sẽ sử dụng một tệp

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

Bạn có thể tải xuống mã nguồn cho bài học hôm nay về GitHub.

Lắng nghe để tải lên

Để bắt đầu, chúng tôi sẽ sử dụng một số nguyên tắc cơ bản thao tác DOM để phát hiện khi người dùng gửi tệp.

Đầu tiên, chúng tôi sẽ sử dụng phương thức

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

Sau đó, chúng tôi sẽ sử dụng phương thức

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

// Listen for submit events
form.addEventListener('submit', handleSubmit);

Bên trong hàm

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

Tiếp theo, chúng tôi sẽ kiểm tra xem trường

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

// Listen for submit events
form.addEventListener('submit', handleSubmit);

// Listen for submit events
form.addEventListener('submit', handleSubmit);

Nếu không có tệp, chúng tôi sẽ sử dụng toán tử

// Listen for submit events
form.addEventListener('submit', handleSubmit);

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();

	// If there's no file, do nothing
	if (!file.value.length) return;

}

Bây giờ, chúng tôi đã sẵn sàng để thực sự tải lên tệp.

Tải lên và xử lý tệp JSON với JavaScript

API FileReader là một tập hợp các phương thức không đồng bộ cho phép bạn xử lý và đọc nội dung của các tệp.

Điều đầu tiên chúng tôi sẽ làm là sử dụng hàm tạo

// Listen for submit events
form.addEventListener('submit', handleSubmit);

// Listen for submit events
form.addEventListener('submit', handleSubmit);

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();

	// If there's no file, do nothing
	if (!file.value.length) return;

	// Create a new FileReader() object
	let reader = new FileReader();

}

Để thực sự đọc tệp, chúng ta có thể sử dụng phương thức

// Listen for submit events
form.addEventListener('submit', handleSubmit);

Chúng tôi gọi nó trên

// Listen for submit events
form.addEventListener('submit', handleSubmit);

// Listen for submit events
form.addEventListener('submit', handleSubmit);

{
	"name": "Merlin",
	"age": "old AF",
	"spells": ["Dancing brooms", "Transform into animal"]
}

// Listen for submit events
form.addEventListener('submit', handleSubmit);

Chúng tôi sẽ sử dụng ký hiệu khung để lấy tệp đầu tiên (và trong trường hợp của chúng tôi).

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();

	// If there's no file, do nothing
	if (!file.value.length) return;

	// Create a new FileReader() object
	let reader = new FileReader();

	// Read the file
	reader.readAsText(file.files[0]);

}

API này không đồng bộ, vì vậy chúng ta cần gắn trình xử lý sự kiện

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

// Listen for submit events
form.addEventListener('submit', handleSubmit);

// Listen for submit events
form.addEventListener('submit', handleSubmit);

Điều này cần được khai báo trước khi chúng tôi thực sự đọc tệp.

Để giữ cho mã của chúng tôi có tổ chức hơn một chút, chúng tôi sẽ sử dụng một hàm được đặt tên:

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();

	// If there's no file, do nothing
	if (!file.value.length) return;

	// Create a new FileReader() object
	let reader = new FileReader();

	// Setup the callback event to run when the file is read
	reader.onload = logFile;

	// Read the file
	reader.readAsText(file.files[0]);

}

Hàm

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

Thuộc tính

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

Đối với mục đích của chúng tôi, chúng tôi sẽ đăng nhập cả chuỗi và JSON được phân tích cú pháp. Bạn có thể muốn sử dụng các thuộc tính từ tệp JSON trong ứng dụng của mình, lưu nó

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit (event) {

	// Stop the form from reloading the page
	event.preventDefault();
}

/**
 * Log the uploaded file to the console
 * @param {event} Event The file loaded event
 */
function logFile (event) {
	let str = event.target.result;
	let json = JSON.parse(str);
	console.log('string', str);
	console.log('json', json);
}

Bây giờ, bất cứ khi nào người dùng gửi tệp JSON, mã của chúng tôi sẽ đọc nó và đăng nhập vào bảng điều khiển.