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. Show
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 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
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
Viết JavaScript để tải lên tệpChú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 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 tinTươ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 |