Cum pot Importa / Încărca Fișiere cu jQuery AJAX?

Iată soluția pe care am reușit să o găsesc și observ destul de multe greșeli comune care au fost făcute.

• Fișierele nu erau atașate corect în JS.
• AJAX dataFilter: function() putea fi înlocuit cu dataType: 'json'.
• JS submit nu are nevoie să returneze false pentru a opri acțiunea formularului.
  • Poate fi înlocuit cu event.stopPropagation() și e.preventDefault().
  • Adăugați un action gol în HTML.
• Funcția PHP pentru AJAX nu se termina cu die().

HTML

<form id="form_import" name="form_import" method="post" enctype="multipart/form-data" action >
    <input id="file_import" name="import_data" type="file" />
    <br/>
    <button id="btn_import" type="submit" >Import</button>
</form>

JavaScript

jQuery(document).ready(function($){
    // Fișierele PHP pot returna un Nonce. Acest lucru localizează scripturile.
    var importNonce = localizedData.import_nonce;

    $('#form_import').submit( function( event ) {
        event.stopPropagation(); // Oprește acțiunile implicite
        event.preventDefault(); // Oprește complet acțiunile implicite

        var formData = new FormData();
        var importFiles = $('#file_import')[0].files;

        // Pentru FIECARE fișier, adaugă în formData.
        // NOTĂ: Adăugarea tuturor fișierelor din importFiles nu funcționează bine cu PHP.
        jQuery.each( importFiles, function( index, value ) {
            var name = 'file_' + index;
            formData.append( name, value )
        });

        formData.append( 'action', 'ajax_file_import' );
        formData.append( '_ajax_nonce', importNonce );

        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: formData,
            cache: false,
            dataType: 'json', // Înlocuiește dataFilter: function() && JSON.parse( data ).
            processData: false, // Nu procesa fișierele
            contentType: false, // Setează content type la false deoarece jQuery va spune serverului că este o cerere de tip query string

            beforeSend: function( jqXHR, settings ){
                // (OPȚIONAL) Concept alternativ pentru AJAX.
                // Elimină vechiul IFrame dacă există.
                var element = document.getElementById('import_IF');
                if ( element !== null ){
                    element.parentNode.removeChild( element );
                }
                // SFÂRȘIT (OPȚIONAL).
            },
            success: function( data, textStatus, jqXHR ) {
                console.log( 'Răspuns de la funcția/metoda PHP AJAX.' );

                // Manipulează datele din data.values

                // (OPȚIONAL) Concept alternativ pentru AJAX.
                // Necesar pentru descărcare în AJAX.
                var paramStr = '';
                paramStr += '?_ajax_nonce=' + data._ajax_nonce;
                paramStr += '&action='      + data.action;
                paramStr += '&filename='    + data.filename;

                var elemIF = document.createElement("iframe");
                elemIF.id = 'import_IF'
                elemIF.style.display = "none";
                elemIF.src = ajaxurl + paramStr;

                document.body.appendChild(elemIF);
                elemIF.parentNode.removeChild(elemIF);
                // SFÂRȘIT (OPȚIONAL).
            },
            complete: function(jqXHR, textStatus){
                console.log( 'AJAX este complet.' );

                // (OPȚIONAL) Concept alternativ pentru AJAX.
                // Curăță IFrame.
                var element = document.getElementById('import_IF');
                if ( element !== null ){
                    element.parentNode.removeChild( element );
                }
                // SFÂRȘIT (OPȚIONAL).
            }
        });// Sfârșit AJAX.
    });// Sfârșit .submit().
});

PHP

<?php
class server {
    public function __construct() {
        // Exemplu pentru adăugarea de scripturi.
        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_example' ) );
        add_action( 'wp_ajax_ajax_file_import', array( $this, 'ajax_import_example' ) );
    }

    public function enqueue_example() {
        wp_register_script(
            'example-js',
            FILE_URL,
            array(),
            VERSION,
            false
        );
        wp_enqueue_script( 'example-js' );

        $data = array(
            'import_nonce'  => wp_create_nonce( 'ajax_file_import_nonce' ),
        );

        wp_localize_script( 'example-js', 'localizedData', $data );
    }

    public function ajax_import_example() {
        check_ajax_referer( 'ajax_file_import_nonce' );

        $raw_content = array();
        $i = 0;
        while ( isset( $_FILES[ 'file_' . $i ] ) ) {
            $file_arr = $_FILES[ 'file_' . $i ];
            $file_content = file_get_contents( $file_arr['tmp_name'] );
            $raw_content[]  = json_decode( $file_content );
            $i++;
        }

        $new_data = array();
        // Manipulează datele noi.
        update_option( 'example_database', $new_data );

        // (OPȚIONAL) Adaugă date pentru returnare în AJAX Success
        $rtn_data = array(
            'action'               => 'apl_import',
            '_ajax_nonce'          => wp_create_nonce( 'alt_ajax' ),
        );
        echo json_encode( $rtn_data );
        // SFÂRȘIT (OPȚIONAL).

        die();
    }
}
?>