Hướng dẫn ajax file upload php - tải lên tệp ajax 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.

    
    
     Upload file vs Ajax
    
    
    



    

        

            
                Upload

                

                    Chọn file
                    
                
                

                    Upload
                
            
            

        
    

3. Xử lý Ajax

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

    //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;
    }];

4. Xử lý PHP phía Server

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