[PHP] Hướng dẫn upload ảnh sử dụng Ajax kết hợp PHP

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

Chức năng upload ảnh lên Server là một chức năng tương đối quen thuộc với lập trình viên. Có rất nhiều cách để chúng ta có thể upload được một file ảnh lên Server, đa số chúng ta thường lựa chọn sử dụng PHP thuần để làm chức năng này vì nó khá đơn giản, tuy nhiên vẫn còn một cách khá hay nữa đó chính là sử dụng Ajax kết hợp với PHP để thực hiện. Vì vậy trong bài viết này vncoder.vn sẽ hướng dẫn các bạn làm một ứng dụng upload ảnh sử dụng Ajax kết hợp với PHP.

1. Xây dựng cấu trúc

-Cấu trúc thư mục của ứng dụng sẽ có dạng như sau:

index.html // phần giao diện
upload.php // xử lý upload
uploads // thư mục upload

2. Dựng giao diện

-Đầu tiên chúng ta sẽ sử dụng HTML và bootstrap để xây dụng giao diện cho ứng dụng.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Upload file vs Ajax</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-success">
        <div class="panel-body">
            <form action="" method="POST" role="form">
                <legend>Upload</legend>

                <div class="form-group">
                    <label for="file">Chọn file</label>
                    <input id="file" type="file" name="sortpic" required=""/>
                </div>
                <div class="form-group">
                    <button id="upload" class="btn btn-primary">Upload</button>
                </div>
            </form>
            <div class="status alert alert-success"></div>
        </div>
    </div>
</div>
</body>
</html>

3. Xử lý Ajax

-Tiếp theo chúng ta sẽ sử lý ajax như sau:

<script>
    //xử lý khi có sự kiện click
    $('#upload').on('click', function () {
        //Lấy ra files
        var file_data = $('#file').prop('files')[0];
        //lấy ra kiểu file
        var type = file_data.type;
        //Xét kiểu file được upload
        var match = ["image/gif", "image/png", "image/jpg",];
        //kiểm tra kiểu file
        if (type == match[0] || type == match[1] || type == match[2]) {
            //khởi tạo đối tượng form data
            var form_data = new FormData();
            //thêm files vào trong form data
            form_data.append('file', file_data);
            //sử dụng ajax post
            $.ajax({
                url: 'upload.php', // gửi đến file upload.php 
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function (res) {
                    $('.status').text(res);
                    $('#file').val('');
                }
            });
        } else {
            $('.status').text('Chỉ được upload file ảnh');
            $('#file').val('');
        }
        return false;
    });
</script>

4. Xử lý PHP phía Server

-Ở upload.php chúng ta sẽ xử lý như sau:

<?php
if (isset($_POST) && !empty($_FILES['file'])) {
    $duoi = explode('.', $_FILES['file']['name']); // tách chuỗi khi gặp dấu .
    $duoi = $duoi[(count($duoi) - 1)]; //lấy ra đuôi file
    // Kiểm tra xem có phải file ảnh không
    if ($duoi === 'jpg' || $duoi === 'png' || $duoi === 'gif') {
        // tiến hành upload
        if (move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name'])) {
            // Nếu thành công
            die('Upload thành công file: ' . $_FILES['file']['name']); //in ra thông báo + tên file
        } else { // nếu không thành công
            die('Có lỗi!'); // in ra thông báo
        }
    } else { // nếu không phải file ảnh
        die('Chỉ được upload ảnh'); // in ra thông báo
    }
} else {
    die('Lock'); // nếu không phải post method
}

5. Kết luận

Như vậy vncoder.vn đã hướng dẫn xây dựng xong ứng dụng upload ảnh bằng Ajax kết hợp với PHP. Hy vọng bài viết sẽ giúp ích cho bạn, chúc bạn thành công!