Truy cập Cloudinary và đăng ký tài khoản miễn phí. Sau khi đăng nhập, bạn sẽ thấy Cloud Name, API Key và API Secret.
Bước 2: Tạo Upload Preset
Vào Settings → Upload → Upload Presets, nhấn Add Upload Preset.
- Đặt tên preset (ví dụ: phuong)
- Chọn Unsigned để không cần API Key khi upload từ client
- Lưu preset lại
Bước 3: Cập nhật file HTML/JS
Trong file của bạn, tìm đoạn:
const cloudName = '' const unsignedPreset = ''Thay thế bằng thông tin của bạn, ví dụ:
const cloudName = 'defrasx'; const unsignedPreset = 'moztuge';Bước 4: Sử dụng tính năng upload
- Mở trang web của bạn
- Kéo thả file vào vùng DropZone hoặc click để chọn file
- Khi upload thành công, sẽ hiện preview và nhiều kiểu link (Direct link, BBCode, Markdown, HTML, YAML…)
- Click vào textbox để copy link nhanh
Bước 5: Xem ảnh đã upload
- Các ảnh upload sẽ được lưu vào IndexedDB
- Bạn có thể xem tối đa 100 ảnh gần nhất trong gallery dưới cùng trang
Lưu ý
- Unsigned preset là bắt buộc nếu muốn upload trực tiếp từ browser mà không cần API Key
- Không chia sẻ API Secret nếu bạn sử dụng preset có signed upload
- Kiểm tra đúng Cloud Name và Preset Name nếu upload thất bại
Cuối cùng
- Cuối cùng tất nhiên phải là code và demo nha, demo này của mình nó không hoạt động đâu vì mình cũng không muốn có nhiều người upload bậy vào đây á nên mình cũng show file để các bạn tự làm trang cho riêng mình thôi.
Kéo xuống cuối sẽ thấy nút download, bấm vào để tải về nha. Code hoàn toàn bằng HTML/JS nên nếu muốn thì view source ra lấy cũng được.
Lúc tải về có khi sẽ thấy cái này:
<?php
// Nếu URL có ?download=1 thì gửi file download
if(isset($_GET['download']) && $_GET['download']==1){
$filename = basename(__FILE__); // tên file hiện tại
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . $filename . '"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize(__FILE__));
readfile(__FILE__);
exit;
}
?>Thì xoá đi nha, và xoá luôn cái nút:
<div class="container mt-4 text-center">
<a href="?download=1" class="btn btn-primary"><i class="fas fa-download"></i> Download file này</a>
</div>Code rất dễ hiểu nên về tách ra để tích hợp vào code khác là chính ^^
Đã thích:
truongbk đã thích bài viết này
hiện tại tớ lưu ảnh trên blogger vẫn ngon hơn