Tài liệu Hướng Dẫn Upload File Lên WordPress Bằng Ajax Dành Cho Người Mới

Bạn đang muốn upload nhiều ảnh trong WordPress mà không cần reload trang? Bài viết này sẽ hướng dẫn bạn cách sử dụng Ajax kết hợp với jQuery để upload file hiệu quả, đặc biệt là trong các form nhập liệu như: đăng sản phẩm, đăng bài viết, thêm thông tin khách hàng…

Tại sao nên upload file bằng Ajax?

Việc sử dụng Ajax giúp:

• Giao diện mượt mà, không reload trang
• Tiết kiệm thời gian người dùng
• Tăng trải nghiệm và tính chuyên nghiệp cho website

1. HTML – Tạo input chọn nhiều ảnh

<input id="js-uploads-your-photos" 
       type="file" 
       accept="image/*" 
       class="form-control-file" 
       name="upload-property-file" 
       multiple>
<div id="wpshare247-done"></div>

Giải thích:

• multiple: Cho phép chọn nhiều ảnh.
• accept=”image/*”: Chỉ cho phép file ảnh.
• id=”js-uploads-your-photos”: Dùng để bắt sự kiện jQuery.

Nếu bạn chưa biết thêm html vào WordPress như thế nào, hãy xem bước 5 bên dưới nhé.

2. jQuery – Gửi file qua Ajax

<script>
            
            jQuery("#js-uploads-your-photos").change(function(e){
                var files = this.files;
                if(files.length > 0){
                    jQuery("#wpshare247-done").html('Đang tải file .....');
                    
                    var wp_ajax_url = '/wp-admin/admin-ajax.php';
                    var form_data = new FormData();
            
                    for (let i = 0; i < files.length; i++) {
                        form_data.append(files[i].name, files[i]);
                    }
            
                    form_data.append('action', 'js_uploads_your_photos');
            
                    jQuery.ajax({
                        url: wp_ajax_url,
                        type: 'POST',
                        contentType: false,
                        processData: false,
                        data: form_data,
                        success: function (response) {
                            alert('Đã upload thành công');
                            
                            const successCount = Object.values(response.files).filter(file => file.error === 0).length;
                            
                            jQuery("#wpshare247-done").html('Đã tải thành công: '+ successCount + 'files');
                            
                            console.log('Kết quả upload:', response);
                        }  
                    });
                }
            });


        </script>

Lưu ý quan trọng: Khi sử dụng FormData để upload file, cần contentType: false và processData: false.

Nếu webiste chưa có thư viện jQuery bạn hãy thêm đoạn code này vào functions.php trước.

function wpshare247_enqueue_jquery() {
    if (!wp_script_is('jquery', 'enqueued')) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'wpshare247_enqueue_jquery');

3. PHP – Xử lý Ajax trong WordPress

Thêm vào file functions.php hoặc plugin của bạn:

function js_uploads_your_photos_display(){
    $arr_response = array();
    $update = 0;

    $files = $_FILES;

    if(!empty($files)){
        foreach($files as $key => $file){ 
            $_FILES = array("upload-property-file" => $file); 
            foreach ($_FILES as $file_key => $array) {              
                $attach_id = wpshare247_handle_attachment($file_key, 0); 
            }
        }
        $update = 1;
    }

    $arr_response = array(
        'update' => $update,
        'files' => $files
    );

    wp_send_json($arr_response);
    die();
}
add_action('wp_ajax_js_uploads_your_photos', 'js_uploads_your_photos_display');
add_action('wp_ajax_nopriv_js_uploads_your_photos', 'js_uploads_your_photos_display');

4. Hàm xử lý ảnh: Tải lên và gắn vào bài viết

function wpshare247_handle_attachment($file_handler, $post_id, $set_thu = false){
    if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) return false;

    require_once(ABSPATH . "wp-admin/includes/image.php");
    require_once(ABSPATH . "wp-admin/includes/file.php");
    require_once(ABSPATH . "wp-admin/includes/media.php");

    $attach_id = media_handle_upload($file_handler, $post_id);

    return $attach_id;
}

Hàm này sẽ:

• Tự động upload hình vào thư viện
• Gắn với post_id (nếu bạn đang tạo bài viết, sản phẩm, đơn hàng…)

Việc thêm ảnh một cách mượt mà không chỉ cải thiện trải nghiệm người dùng mà còn hỗ trợ quá trình quản trị nội dung chuẩn SEO:

• Tăng tốc độ thao tác
• Gắn metadata ảnh dễ dàng hơn
• Quản lý ảnh trong Media Library thuận tiện

Sử dụng Ajax để upload file trong WordPress giúp nâng cấp giao diện quản trị và trải nghiệm người dùng. Với đoạn mã và hướng dẫn trong bài, bạn có thể dễ dàng áp dụng vào bất kỳ form nào trong website WordPress của mình.

5.Cách thêm HTML vào WordPress dành cho người mới bắt đầu

Bạn có thể thêm đoạn HTML trên vào WordPress bằng nhiều cách, tùy vào bạn đang làm việc với 

theme, plugin hay trình tạo trang kéo thả

5.1: Thêm trực tiếp vào file page.php hoặc single.php

Bước thực hiện:

1. Vào Giao diện » Sửa giao diện (Appearance > Theme File Editor)
2. Chọn file như page.php, single.php, hoặc template-custom.php
3. Dán đoạn input vào nơi bạn muốn hiển thị form upload:

   <h3>Upload ảnh sản phẩm:</h3> 
   <input id="js-uploads-your-photos" type="file" accept="image/*" name="upload-property-file" multiple>

• Ưu điểm: Hiển thị cố định, load nhanh
• Nhược điểm: Không linh hoạt, cần hiểu HTML/PHP một chút

5.2: Thêm bằng Shortcode trong bài viết hoặc trang

Dành cho người không rành code, thích dùng Gutenberg hoặc Classic Editor.

Bước thực hiện:

• Dán code PHP sau vào file functions.php:

function wpshare247_upload_input_shortcode(){
    ob_start();
    ?>
    <h3>Upload ảnh sản phẩm:</h3>
    <input id="js-uploads-your-photos" type="file" accept="image/*" name="upload-property-file" multiple>
    <?php
    return ob_get_clean();
}
add_shortcode('upload_anh_ajax', 'wpshare247_upload_input_shortcode');

• Sau đó bạn vào trang / bài viết bất kỳ, chèn đoạn: [upload_anh_ajax]
• Ưu điểm: Ai cũng dùng được, dễ chèn vào mọi trang
• Nhược điểm: Cần thêm shortcode PHP vào theme

5.3: Thêm bằng Custom HTML Block trong Gutenberg

Dành cho người dùng WordPress mới, dùng giao diện block.

Bước thực hiện:

1. Vào trang / bài viết cần thêm upload
2. Thêm block “Custom HTML”
3. Dán đoạn:

<h3>Upload ảnh sản phẩm:</h3> <input id="js-uploads-your-photos" type="file" accept="image/*" name="upload-property-file" multiple>

• Ưu điểm: Cực nhanh, không cần biết lập trình
• Nhược điểm: Cần thêm code JS xử lý riêng

5.4: Thêm vào một Page Builder (Elementor, WPBakery…)

Dành cho ai dùng trình kéo thả.

Với Elementor:

1. Thêm widget HTML
2. Dán đoạn input HTML vào
3. JS cần thêm vào phần footer (trong theme hoặc plugin)

Với WPBakery:

1. Thêm phần tử Raw HTML
2. Dán đoạn mã

• Ưu điểm: Dễ chỉnh vị trí, giao diện đẹp
• Nhược điểm: Không xử lý JS trực tiếp được, phải thêm nơi khác

5.5: Thêm vào Widget (Sidebar hoặc Footer)

1. Vào Giao diện » Widget
2. Thêm widget HTML Tùy chỉnh (Custom HTML)
3. Dán đoạn input vào:

<input id="js-uploads-your-photos" type="file" accept="image/*" name="upload-property-file" multiple>

• Ưu điểm: Nhanh, tiện lợi
• Nhược điểm: Ít ai dùng upload ảnh ở sidebar

Bạn nên chọn cách phù hợp với mình:

• Theme developer: Dùng page.php hoặc shortcode
• Người dùng bình thường: Dùng shortcode hoặc block HTML
• Dùng builder như Elementor: Dán vào HTML widget

Bằng cách nào đi nữa thì việc học WordPress bắt đầu từ số 0 luôn quan trọng, bạn có thể xem lại tất cả các bài viết trong Wpshare247 để có thêm nhiều kiến thức nhé.