Thanh tiến trình tải lên tập tin javascript

Có thể tải lên tệp AJAX trong Javascript bằng cách sử dụng XMLHttpRequest & FormData objects.

Mã mẫu nhanh

Upload File

Làm cách nào để xử lý tệp đã tải lên trong PHP?

Quá trình tải tệp lên hoàn tất như thế nào?

Tải lên tệp trong Javascript có thể đạt được bằng cách

• Chọn tệp từ hệ thống bằng thẻ .
• Xác thực tệp đã chọn cho loại và kích thước
• Gửi yêu cầu POST bằng cách sử dụng đối tượng XMLHttpRequest với tệp được đính kèm.

Bước 1 — Chọn một tệp cục bộ

Upload File

• Để cho phép chọn nhiều tệp, hãy đặt thuộc tính multiple .

• Có thể đặt các hạn chế về loại tệp bằng cách chỉ định loại MIME bắt buộc trong thuộc tính accept (mặc dù người dùng có thể ghi đè . Mỗi loại MIME được phép cần được phân tách bằng dấu phẩy.

Bước 2 - Xác thực tệp đã chọn cho Loại và Kích thước

document.querySelector('#upload-button').addEventListener('click', function() {
	// user has not chosen any file
	if(document.querySelector('#file-input').files.length == 0) {
		alert('Error : No file selected');
		return;
	}

	// first file that was chosen
	let file = document.querySelector('#file-input').files[0];

	// allowed types
	let allowed_mime_types = [ 'image/jpeg', 'image/png' ];
	
	// allowed max size in MB
	let allowed_size_mb = 2;
	
	// validate file type
	if(allowed_mime_types.indexOf(file.type) == -1) {
		alert('Error : Incorrect file type');
		return;
	}

	// validate file size
	if(file.size > allowed_size_mb*1024*1024) {
		alert('Error : Exceeded size');
		return;
	}

	// validation is successful
	alert('You have chosen the file ' + file.name);

	// upload file now
});

• Thuộc tính files của phần tử DOM đầu vào tệp là một mảng các đối tượng tệp đại diện cho các tệp được người dùng chọn.
• type của đối tượng tệp đã chọn cung cấp loại MIME của nó.
• size cung cấp kích thước tính bằng byte.
• name cung cấp tên của nó.

Bước 3 — Gửi Yêu cầu POST AJAX có Tệp đính kèm

let data = new FormData();

// file selected by the user
// in case of multiple files append each of them
data.append('file', document.querySelector('#file-input').files[0]);

let request = new XMLHttpRequest();
request.open('POST', 'upload.php'); 

// upload progress event
request.upload.addEventListener('progress', function(e) {
	let percent_complete = (e.loaded / e.total)*100;
	
	// percentage of upload completed
	console.log(percent_complete);
});

// AJAX request finished event
request.addEventListener('load', function(e) {
	// HTTP status message
	console.log(request.status);

	// request.response will hold the response from the server
	console.log(request.response);
});

// send POST request to server side script
request.send(data);

• Tệp tải lên yêu cầu nhiều phần/biểu mẫu dữ liệu yêu cầu HTTP POST tới máy chủ. Điều này có thể đạt được bằng cách gửi một đối tượng FormData .
• Sự kiện tiến trình của XMLHttpRequest. đối tượng tải lên lắng nghe tiến trình tải lên. Thanh tiến trình tải lên có thể được tạo bằng cách sử dụng này.
• Sự kiện tải xử lý sự cạnh tranh của yêu cầu AJAX.

Câu hỏi thường gặp khác

Làm cách nào để xử lý tệp đã tải lên bằng PHP?

 $allowed_size_mb*1024*1024)
	exit('Error : Exceeded size');

// safe unique name from file data
$file_unique_name = sha1_file($_FILES['file']['tmp_name']);
$file_extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
$file_name = $file_unique_name . '.' . $file_extension;

$destination = 'uploads/' . $file_name;

// save file to destination
if(move_uploaded_file($_FILES['file']['tmp_name'], $destination) === TRUE)
	echo 'File uploaded successfully';
else
	echo 'Error: Uploaded file failed to be saved';
?>