Html sang javascript cơ sở64

Khả năng tải tệp lên là một tính năng được yêu cầu cho một số trang web và ứng dụng phổ biến hiện nay. Từ công việc Tải lên hình ảnh trên một mảng xã hội cho avatar hoặc sơ yếu lý lịch, lưu các tập tin. pdf,. docx. Hầu như đã xuất hiện ở mọi nơi

Là một web lập trình viên, chúng ta nên biết tính năng hỗ trợ này của HTML cùng với một chút JavaScript để xử lý. With HTML5, thì tính năng Upload File (File API) đã được thêm vào

 
const fileUpload = document.querySelector("#file-upload");

2. To use, we need to read

 
const fileUpload = document.querySelector("#file-upload");

3 and Object File. Đã giải quyết nhiều vấn đề về tải lên nhiều tệp,. v. v

Tải lên một tệp

Thông thường, chúng ta chỉ cần điền

 
const fileUpload = document.querySelector("#file-upload");

4 cho thẻ

 
const fileUpload = document.querySelector("#file-upload");

5 trong trường hợp muốn đăng tải tệp cho ứng dụng web

 
<input type="file" id="file-upload" required />

Khi bật trạng thái tải lên tệp trên thẻ đầu vào với

 
const fileUpload = document.querySelector("#file-upload");

6 người dùng sẽ được phép đăng tải một hoặc nhiều tệp. Mặc dù vậy, nó sẽ cho phép bạn tải lên một tập tin sử dụng hệ thống gốc của trình duyệt

Khi tải lên thành công,

 
const fileUpload = document.querySelector("#file-upload");

7 cho phép bạn đọc các thông tin của Tệp dưới dạng Đối tượng thông qua JavaScript. Để xem được các thông tin từ tệp đối tượng, chúng ta cần lắng nghe chúng bằng sự kiện

 
const fileUpload = document.querySelector("#file-upload");

8 của tệp tải lên

Đầu tiên, truy vấn thông tin đối tượng qua

 
const fileUpload = document.querySelector("#file-upload");

9

 
const fileUpload = document.querySelector("#file-upload");

Sau đó, thêm sự kiện

 
const fileUpload = document.querySelector("#file-upload");

8 để đọc thông tin của tệp đối tượng khi quá trình tải lên hoàn tất. Chúng ta sẽ lấy thông tin của tập tin từ

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

1

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

Chú ý, Mang FileList với đối tượng Tệp có tất cả thông tin (siêu dữ liệu) về tệp được tải lên.

Tải lên nhiều tệp

Chúng ta có thể tải nhiều tệp cùng lúc. Để làm điều đó, chúng ta cần thêm một thuộc tính vào thẻ đầu vào là

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

2

 
<input type="file" id="file-upload" multiple required />

Bây giờ, Trình duyệt sẽ cho bạn tải xuống 1 hoặc nhiều tệp cùng lúc. Giống như ví dụ trước, chúng ta vẫn đang sử dụng sự kiện

 
const fileUpload = document.querySelector("#file-upload");

8 để lắng nghe trạng thái và lấy thông tin đã tải xuống của tập tin. You have to idea not,

 
const fileUpload = document.querySelector("#file-upload");

3 is an array, dành cho nhiều người và bạn có thể lấy thông tin tệp từ đó.

Tìm hiểu về tập tin siêu dữ liệu

Bất kể khi nào chúng tôi tải xuống tệp, tệp đối tượng đều có siêu dữ liệu chứ không phải thông tin giống như tên, kích thước, thời gian cập nhật lần cuối, loại, v.v. Đây là những thông tin hữu ích để bạn kiểm tra và cần thiết có thể hiển thị cho người dùng

 
const fileUpload = document.querySelector("#file-upload");

fileUpload.addEventListener("change", (e) => {
	const files = e.target.files;
	
	for(const file of files) {
		const {name, type, size, lastModified } = file;
		// Làm gì đó với các thông tin trên
		
		console.log(file)
	}
})

Tìm hiểu thuộc tính chấp nhận trên tệp

Chúng ta có thẻ sử dụng thuộc tính chấp nhận thuộc tính đầu vào type=file để giới hạn, cho phép hoặc từ chối các loại tệp đăng tải từ phía người dùng. Có thể bạn chỉ muốn cho phép người dùng tải tệp hình ảnh thuộc định dạng

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)



})

5,

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

6. You can't use this property

 
<input type="file" accept=".jpg, .png" multiple />

Quản lý nội dung của tập tin

Bạn có thể muốn hiển thị nội dung hình ảnh vừa đăng tải với mục đích người dùng muốn, người dùng biết họ vừa tải đối tượng lên bất cứ thứ gì

Chúng ta có thể sử dụng FileReader để chuyển đổi tập tin sang định dạng chuỗi nhị phân. Chúng ta sẽ sử dụng sự kiện

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

7 để lắng nghe và lấy chuỗi nhị phân của tệp đã đăng tải

• Tìm hiểu thêm về FileReader

 
// Khởi tạo đối tượng FileReader
const reader = new FileReader();

// Lắng nghe trạng thái đăng tải tệp
fileUpload.addEventListener("change", (event) => {
	// Lấy thông tin tập tin được đăng tải
	const files  = event.target.files;
	
	// Đọc thông tin tập tin đã được đăng tải
	reader.readAsDataURL(files[0])
	
	// Lắng nghe quá trình đọc tập tin hoàn thành
	reader.addEventListener("load", (event) => {
		// Lấy chuỗi Binary thông tin hình ảnh
		const img = event.target.result;
		
		// Thực hiện hành động gì đó, có thể append chuỗi giá trị này vào thẻ IMG
		console.log(img) // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAA........
	})
})

Kiểm tra kích thước tệp (tệp) đã tải xuống

Như chúng ta đã thấy, có thể đọc được thông tin của tập tin thông qua siêu dữ liệu của chúng. Như vậy, chúng ta có cơ sở để kiểm soát, cho phép hoặc từ chối các tập tin được tải xuống từ phía máy khách, điều này cũng giúp bạn giảm tải trọng cho Máy chủ

 
fileUpload.addEventListener("change", (event) => {



	const files = event.target.files;
	
	const getSizeImage = files[0].size;
	
	if(size > 1024 * 1024) alert("Chỉ cho phép tải tệp tin nhỏ hơn 1MB");
	else alert("Đăng tải tệp thành công");
})

Shows too loading file

Thông thường khi sử dụng, chúng tôi sẽ yêu cầu hiển thị thông tin về quá trình tải tệp đã đăng tải, để xác định tên người sử dụng. Chúng ta sẽ sử dụng FileReader() như lần trước để kiểm soát quá trình này

 
const reader = new FileReader();

Ngoài sự kiện

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

8, để lắng nghe quy trình tải tập tin, chúng tôi sẽ sử dụng sự kiện

 
fileUpload.addEventListener("change", (event) => {
	const { files } = event.target;
	
	console.log("files", files)
})

9

 
reader.addEventListener("progress", (event) => {
	const {loaded, total} = event;
	
	if(loaded && total) {
		const percent = Math.round(loaded / total) * 100;
		
		document.querySelector("progress").value = percent
	}
})

Thư mục tải lên

Ngoài việc đăng tải tập tin, bạn còn có quyền đăng tải cả thư mục. Chà, nó rất khả thi nhưng có một số giới hạn, có thể với hiện tại điều này không còn đáng kể

• Tìm hiểu thêm về thuộc tính này. thư mục webkit

It's easy easy to use this features, as the side under onlycần thêm thuộc tính webkitdirectory

 
const fileUpload = document.querySelector("#file-upload");

0

Xử lý đường dẫn tệp tải lên

Thông thường khi bạn tải tệp lên và lấy đường dẫn ảnh sẽ có định dạng dữ liệu. image/base64 vô cùng dài. Bạn có thể xử lý đường rút gọn bằng cách sử dụng URL. createObjectURL() để tạo đường dẫn duy nhất cho tệp đã tải xuống. Bạn cũng có thể loại bỏ nó bằng URL phương thức. thu hồiObjectURL()

Rất đơn giản, chúng ta chỉ cần lấy thông tin tệp vừa đọc và đặt vào bên trong createObjectURL(here)

 
const fileUpload = document.querySelector("#file-upload");

1

Phía trên là các trường hợp lệ thường gặp trong quá trình xử lý tệp được đăng tải từ máy khách. Có thể nó sẽ giúp ích cho bạn trong thời gian tới