[Javascript] Hướng dẫn xem ảnh trước khi Upload lên Server sử dụng thư viện Jquery trong Javascript

Đăng bởi: Admin | Lượt xem: 4294 | Chuyên mục: Javascript

Xem trước hình ảnh trước khi tải lên là một tính năng rất hữu ích cho chức năng tải lên tệp. Tệp xem trước giúp người dùng đảm bảo trước khi tải tệp lên máy chủ và thay đổi tệp hình ảnh đã chọn nếu cần. Từ góc độ người dùng, sẽ rất hữu ích để tải lên một hình ảnh hoặc tệp hoàn hảo mà không cần thực hiện tải lên lặp đi lặp lại. Cùng vncoder.vn tìm hiểu về chức năng này nhé.

1. File Upload Form

Tạo một file chứa form HTML:

<form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Upload"/>
</form>

Hãy nhớ thêm thư viện Jquery vào nhé:

< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script >

2. Tạo bản xem trước bằng Javascript

filePreview() là một chức năng tùy chỉnh giúp để đọc các tập tin dữ liệu thô và tạo ra một bản xem trước của tập tin.

change(): phương thức jQuery kích hoạt filePreview() chức năng khi một tệp được chọn.
filePreview(): chức năng tạo ra một bản xem trước của tập tin được lựa chọn và hiển thị nó trên trang web.

$("#file").change(function () {
    filePreview(this);
});

3. Upload ảnh sử sụng PHP

Sau khi đã chọn được ảnh cần tải lên, chúng ta bắt đầu xử lý upload ảnh lên server bằng PHP

Lấy dữ liệu tệp bằng $ _FILES trong PHP .
Sử dụng hàm move_uploaded_file () để tải lên tệp trong PHP.

<?php 
$uploadPath = 'uploads/'; 
if(isset($_POST['submit']) && !empty($_FILES['file']['name'])){ 
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadPath.$_FILES['file']['name'])){ 
        echo 'File has been uploaded successfully.'; 
    }else{ 
        echo 'File upload failed, please try again.'; 
    } 
} 
?>

4. Kết luận

Trên đây là toàn bộ bài hướng dẫn về cách xem ảnh trước khi upload lên server sử dụng thư viện Jquery trong Javascript của vncoder.vn. Hy vọng bài viêt sẽ giúp ích cho bạn, chúc bạn thành công!