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"]
}
0 với ID {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
1.Nó chứa một trường duy nhất,
{
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
2, với {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
3 là {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
4. Các trường có loại này cho phép bạn chỉ định tham số {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
5, với danh sách được phân tách bằng dấu phẩy các loại tệp được chấp nhận. Đối với mục đích của chúng tôi, chúng tôi sẽ hạn chế tải lên chỉ các tệp {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
6.
File to upload
Upload
Tôi sẽ sử dụng một tệp
{
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
7 đơn giản để kiểm tra.{
"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"]
}
8 để có được các phần tử {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
1 và {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
2 và lưu chúng vào các biến {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
0 và {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
4, tương ứng.// 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'];
3 để nghe các sự kiện // Get the form and file field
let form = document.querySelector['#upload'];
let file = document.querySelector['#file'];
4 trên phần tử {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
0. Chúng tôi sẽ sử dụng chức năng // Get the form and file field
let form = document.querySelector['#upload'];
let file = document.querySelector['#file'];
6 làm chức năng gọi lại.// 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'];
6, điều đầu tiên chúng tôi sẽ làm là sử dụng // Get the form and file field
let form = document.querySelector['#upload'];
let file = document.querySelector['#file'];
8 để ngăn mẫu tải lại trang./**
* 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"]
}
4 có tệp thực tế để xử lý bằng thuộc tính // Listen for submit events
form.addEventListener['submit', handleSubmit];
0 không, sau đó kiểm tra thuộc tính // Listen for submit events
form.addEventListener['submit', handleSubmit];
1 của nó.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];
2 để kết thúc chức năng gọi lạ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;
}
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];
3 để tạo một thể hiện Filereader mới và gán nó cho biến // Listen for submit events
form.addEventListener['submit', handleSubmit];
4./**
* 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];
5.Chúng tôi gọi nó trên
// Listen for submit events
form.addEventListener['submit', handleSubmit];
4 của chúng tôi và truyền trong tệp để đọc như một đối số. Chúng tôi có thể truy cập tệp bằng thuộc tính // Listen for submit events
form.addEventListener['submit', handleSubmit];
7 trên trường {
"name": "Merlin",
"age": "old AF",
"spells": ["Dancing brooms", "Transform into animal"]
}
4 của chúng tôi. Điều này trả về một mảng [vì // Listen for submit events
form.addEventListener['submit', handleSubmit];
9] đầu vào có thể hỗ trợ nhiều tệp.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[];
}
0 vào đối tượng // Listen for submit events
form.addEventListener['submit', handleSubmit];
4. Điều này sẽ chạy bất cứ khi nào // Listen for submit events
form.addEventListener['submit', handleSubmit];
4 đọc một tệp.Đ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[];
}
3. Chúng tôi không muốn nó chạy ngay lập tức, vì vậy chúng tôi rời khỏi dấu ngoặc đơn [/**
* Handle submit events
* @param {Event} event The event object
*/
function handleSubmit [event] {
// Stop the form from reloading the page
event.preventDefault[];
}
4] khi giao nó cho sự kiện./**
* 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[];
}
3 nhận được đối số /**
* Handle submit events
* @param {Event} event The event object
*/
function handleSubmit [event] {
// Stop the form from reloading the page
event.preventDefault[];
}
6 ngầm từ đối tượng Filereader, vì vậy chúng tôi sẽ thêm nó dưới dạng tham số.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[];
}
7 sẽ là phiên bản chuỗi của tệp JSON được tải lên. Chúng ta có thể chuyển nó vào phương thức /**
* Handle submit events
* @param {Event} event The event object
*/
function handleSubmit [event] {
// Stop the form from reloading the page
event.preventDefault[];
}
8 để lấy biểu mẫu đối tượng JSON.Đố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[];
}
9 hoặc làm điều gì đó khác với nó [như gửi nó đến API]./**
* 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.