Hướng dẫn how do i upload ajax to wordpress? - Làm cách nào để tải ajax lên wordpress?

Bạn có muốn tích hợp tải lên tệp AJAX trong WordPress không? Đôi khi, bạn cần thực hiện một tác vụ tải lên một tệp thông qua AJAX. Trong bài viết này, chúng tôi nghiên cứu cách tải lên các tệp với JQuery và Ajax trong WordPress. Tôi sẽ bao gồm tải lên cả các tệp đơn và nhiều tệp.

Lý do rõ ràng nhất để sử dụng kỹ thuật này là tải lên các tệp thông qua AJAX làm giảm tải trên máy chủ. Quá trình này không yêu cầu tải lại toàn bộ trang để lưu thêm các cuộc gọi cho máy chủ. Cuối cùng, nó lưu băng thông máy chủ. Cách tiếp cận này cũng cung cấp trải nghiệm người dùng tốt hơn trên trang web WordPress của bạn.

Tạo HTML

Để bắt đầu, bạn cần một biểu mẫu với đầu vào tệp. Chúng tôi sẽ thực hiện cuộc gọi AJAX một khi người dùng chọn một tệp ở phía máy khách. Nội dung tệp này sẽ được gửi đến máy chủ. Về phía máy chủ, chúng tôi thu thập nội dung của một tệp và lưu trữ bản sao của nó trong thư mục wp-content/uploads. Để tạo một tệp có nội dung đã cho trong thư mục tải lên, tôi sẽ sử dụng phương thức WP_UPLOAD_BITS.

Thêm HTML dưới đây vào mẫu trang của bạn hoặc bất cứ nơi nào bạn muốn.

Tôi đã cung cấp ID tệp tệp trên mạng để thực hiện các sự kiện thay đổi trên đầu vào tệp. Thuộc tính ACCEPTER = hình ảnh/**sẽ chỉ hiển thị hình ảnh trong tệp Explorer.accept=”image/*” will show only images in the file explorer.

Bao gồm tệp JS trong môi trường WordPress

Để gửi tệp ở phía máy chủ, bắt buộc phải viết mã JavaScript. Đối với điều này, tôi sẽ tạo một custom.js vào thư mục chủ đề và đưa nó vào môi trường WordPress. Tệp này sẽ có mã JavaScript để xử lý

  • Thay đổi sự kiện trên đầu vào tệp
  • Thu thập nội dung tệp
  • Gọi dữ liệu AJAX và đăng tệp lên máy chủ

Mã dưới đây sẽ đi vào bên trong tệp

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
0. Sau khi thêm điều này, bạn sẽ thấy custom.js tự động được đưa vào đầu tiên.

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');

Nhìn vào mã trên và bạn sẽ nhận thấy 2 phần tử được truyền vào tệp custom.js.

  • function blog_scripts() {
        // Register the script
        wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
     
        // Localize the script with new data
        $script_data_array = array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'security' => wp_create_nonce( 'file_upload' ),
        );
        wp_localize_script( 'custom-script', 'blog', $script_data_array );
     
        // Enqueued script with localized data.
        wp_enqueue_script( 'custom-script' );
    }
    add_action('wp_enqueue_scripts', 'blog_scripts');
    
    3: Trong WordPress, tất cả AJAX yêu cầu thực thi thông qua url urm admin-ajax.php. Chúng tôi sẽ gọi URL này trong JavaScript.admin-ajax.php URL. We will call this URL in JavaScript.
  • function blog_scripts() {
        // Register the script
        wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
     
        // Localize the script with new data
        $script_data_array = array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'security' => wp_create_nonce( 'file_upload' ),
        );
        wp_localize_script( 'custom-script', 'blog', $script_data_array );
     
        // Enqueued script with localized data.
        wp_enqueue_script( 'custom-script' );
    }
    add_action('wp_enqueue_scripts', 'blog_scripts');
    
    4: Với biến này, tôi đang chuyển một WordPress không phải là để tránh các cuộc tấn công CSRF.

Viết JavaScript để tải lên tệp

Chúng tôi đã sẵn sàng với mẫu HTML và tệp JS. Bây giờ, chúng tôi phải bắt sự kiện thay đổi, xây dựng đối tượng tệp với nội dung tệp và thực hiện cuộc gọi AJAX. Thêm mã sau vào tệp custom.js.

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_data = $(this).prop('files')[0];
        form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);
 
        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File uploaded successfully.');
            }
        });
    });
});

Ở đây, tôi đang nối thêm các đối số nội dung, hành động và bảo mật của tệp vào đối tượng tệp. Chúng tôi tiến hành nội dung tệp này ở phía máy chủ để tạo một tệp từ nó. Các giá trị của hành động và bảo mật sẽ được xử lý trong bước tiếp theo.

Tải lên tệp trên máy chủ

Giá trị của đối số

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
6 được sử dụng để gọi hàm PHP phía máy chủ. Chúng ta cần chuyển giá trị này cho các hành động WordPress như sau.

add_action('wp_ajax_file_upload', 'file_upload_callback');
add_action('wp_ajax_nopriv_file_upload', 'file_upload_callback');

Bạn nên thêm mã trên trong tệp

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
0. Đối với ‘wp_ajax_, và‘ wp_ajax_nopriv_, tôi đã bổ sung giá trị hành động của hành động là ‘file_upload. Tham số thứ hai ‘file_upload_callback, là phương thức gọi lại sẽ có mã thực tế để tải lên tệp phía máy chủ. ‘WP_AJAX_ {ACTION} Đo bắn hành động Ajax.

Lưu ý: Bạn không cần phải viết hành động ‘wp_ajax_nopriv_, nếu bạn đang thêm chức năng này vào phần phụ trợ. Hành động này chỉ được yêu cầu cho người dùng phía trước.: You don’t need to write the ‘wp_ajax_nopriv_’ action if you are adding this functionality on the backend. This action is required only for front-end users.

function file_upload_callback() {
    check_ajax_referer('file_upload', 'security');
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    if (in_array($_FILES['file']['type'], $arr_img_ext)) {
        $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
        //$upload['url'] will gives you uploaded file path
    }
    wp_die();
}

Câu lệnh đầu tiên kiểm tra bảo mật không phải và thực thi mã chỉ khi không hợp lệ.

Hãy tiếp tục và thử nó. Tệp của bạn nên được tải lên thư mục

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
8. Bạn sẽ tìm thấy tệp của mình trong thư mục tháng hiện tại của thư mục tải lên.uploads directory.

Tải lên nhiều tập tin

Tương tự như một tệp duy nhất bạn muốn tải lên nhiều tệp thông qua AJAX. Với một vài thay đổi trong mã trước, bạn có thể đạt được nó.

Đầu tiên, thêm một thuộc tính ‘nhiều người vào đầu vào tệp. Điều này cho phép người dùng chọn nhiều tệp trên tệp Explorer.

Ở đầu JavaScript, chúng tôi phải chọn nhiều tệp, lặp qua chúng và xây dựng một đối tượng tệp cuối cùng.

custom.js

jQuery(function($) {    
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_obj = $this.prop('files');
        form_data = new FormData();
        for(i=0; i

Cuối cùng, trong chức năng gọi lại AJAX, lặp qua mảng tệp và tải lên từng tệp trên máy chủ.

function file_upload_callback() {
    check_ajax_referer('file_upload', 'security');
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    for($i = 0; $i < count($_FILES['file']['name']); $i++) {
        if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
            $upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
            //$upload['url'] will gives you uploaded file path
        }
    }
    wp_die();
}

Tôi hy vọng bạn hiểu tệp AJAX tải lên trong WordPress. Hướng dẫn này chủ yếu tập trung vào việc tải lên hình ảnh. Tuy nhiên, bằng cách xóa các tham chiếu đến hình ảnh, bạn có thể tải lên bất kỳ định dạng tệp nào khác thông qua mã này.

Những bài viết liên quan

  • Cách tải các bài đăng WordPress với Ajax
  • Cách sử dụng JQuery Ajax trong WordPress
  • Tải nội dung động trên phương thức Bootstrap trong WordPress

Nếu bạn thích bài viết này, sau đó vui lòng đăng ký kênh YouTube của chúng tôi cho các hướng dẫn video.

Chúng ta có thể sử dụng Ajax trong WordPress không?

Bạn có thể thấy Quản trị viên của Quản trị viên. Nó ban đầu được tạo ra cho tất cả các chức năng thực hiện các yêu cầu AJAX từ Quản trị viên WordPress. Nó cũng được sử dụng cho phần công khai của web. Tất cả các yêu cầu AJAX WordPress phải đi qua tập lệnh PHP. Nói cách khác, quản trị viên-Ajax.All WordPress AJAX requests must go through a PHP script. In other words, admin-ajax.

Đệ trình mẫu Ajax trong WordPress là gì?

Ajax, viết tắt của JavaScript và XML không đồng bộ, là một kỹ thuật lập trình JavaScript cho phép các nhà phát triển chuyển dữ liệu mà không cần tải lại một trang.Nó được sử dụng phổ biến nhất trong các biểu mẫu web cho phép người dùng gửi dữ liệu biểu mẫu mà không cần tải lại một trang.a JavaScript programming technique which allows developers to transfer data without reloading a page. It is most commonly used in web forms allowing users to submit form data without reloading a page.

Làm thế nào tôi có thể biết nếu WordPress Ajax đang hoạt động?

Để xem nếu yêu cầu hiện tại là yêu cầu AJAX được gửi từ thư viện JS (như jQuery), bạn có thể thử một cái gì đó như thế này: nếu (!) == 'xmlhttprequest') {// Đây là một yêu cầu ajax.}if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) { //This is an ajax request. }

Chúng ta có thể tải lên tệp bằng Ajax không?

Tệp AJAX tải lên một phương thức JavaScript phải được mã hóa để bắt đầu tải lên tệp dựa trên AJAX không đồng bộ;Một thành phần phải tồn tại trên máy chủ để xử lý tải lên tệp và lưu tài nguyên cục bộ;Máy chủ phải gửi phản hồi cho trình duyệt cho biết tải lên tệp JavaScript đã thành công;và.A JavaScript method must be coded to initiate the asynchronous Ajax based file upload; A component must exist on the server to handle the file upload and save the resource locally; The server must send a response to the browser indicating the JavaScript file upload was successful; and.