Hướng dẫn value file html - tập tin giá trị html

Khả năng Upload file 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ừ việc Upload hình ảnh trên mảng xã hội cho avatar hay resume, lưu các file .pdf, .docx. Hầu như đã xuất hiện ở mọi nơi.Upload file 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ừ việc Upload hình ảnh trên mảng xã hội cho avatar hay resume, lưu các file .pdf, .docx. Hầu như đã xuất hiện ở mọi nơi.

Nội dung chính ShowShow

• Single File Upload
• Multiple Files Upload
• Tìm hiểu về metadata file
• Tìm hiểu về thuộc tính accept trên file
• Quản lý nội dung của tập tin file
• Kiểm soát kích cỡ tập tin (tệp) đăng tải
• Hiển thị quá trình đăng tải tệp
• Upload directory
• Xử lý đường dẫn file upload
• Có thể bạn sẽ cần

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

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

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

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

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

Single File Upload

Multiple Files Upload

Tìm hiểu về metadata fileupload file trên thẻ input với

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

Tìm hiểu về thuộc tính accept trên fileFile dưới dạng Object thông qua JavaScript. Để xem được các thông tin từ đối tượng File, chúng ta cần lắng nghe chúng bằng sự kiện

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

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

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

Kiểm soát kích cỡ tập tin (tệp) đăng tảifile khi quá trình upload hoàn thành. 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)
})

Upload directoryFileList với đối tượng File có tất cả thông tin (metadata) về file được tải lên.

Multiple Files Upload

Tìm hiểu về metadata file

Tìm hiểu về thuộc tính accept trên fileBrowser sẽ cho bạn tải 1 hoặc hiều files cùng lúc. Giống như ví dụ trước, chúng ta có vẫn sử dụng sự kiện

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

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

Quản lý nội dung của tập tin filefile đều có metadata chứ thông tin giống như name, size ,last update time, type, etc. Đây là những thông tin hữu ích để bạn kiểm soát 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 về thuộc tính accept trên file

Quản lý nội dung của tập tin fileaccept trên input thuộc type=file để giới hạn, cho phép hoặc từ chối các loại tập tin đă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)
})

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

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

Kiểm soát kích cỡ tập tin (tệp) đăng tải

Hiển thị quá trình đăng tải tệpFileReader để chuyển đổi tập tin file sang dạng chuỗi binary. Chúng ta sẽ sử dụng sự kiện

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

• Upload directory

// 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 soát kích cỡ tập tin (tệp) đăng tải

Hiển thị quá trình đăng tải tệpServer.

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");
})

Hiển thị quá trình đăng tải tệp

Upload directoryFileReader() như lần trước để kiểm soát quá trình này.

const reader = new FileReader();

Xử lý đường dẫn file upload

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

Upload directory

Xử lý đường dẫn file upload

• Có thể bạn sẽ cần

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

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

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

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

Xử lý đường dẫn file upload

Có thể bạn sẽ cần

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

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

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

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

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

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

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

Có thể bạn sẽ cần

• Mình đã tham khảo qua các bài viết: https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi