Come Importare/Caricare File con jQuery AJAX?

Ecco la soluzione che sono riuscito a trovare, e in realtà vedo diversi errori comuni che sono stati commessi.

• I file non venivano aggiunti correttamente in JS.
• L'AJAX dataFilter: function() poteva essere sostituito con dataType: 'json'.
• Il submit JS non ha bisogno di restituire false per fermare l'azione del form.
  • Poteva essere sostituito con event.stopPropagation() e e.preventDefault().
  • Aggiungere un'azione vuota al form in HTML.
• La funzione PHP per AJAX non terminava con 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" >Importa</button>
</form>

JavaScript

jQuery(document).ready(function($){
    // I file PHP potrebbero restituire un Nonce. Questo però localizza gli script.
    var importNonce = localizedData.import_nonce;

    $('#form_import').submit( function( event ) {
        event.stopPropagation(); // Ferma le azioni predefinite
        event.preventDefault(); // Blocca completamente le azioni predefinite

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

        // Per OGNI file, aggiungi a formData.
        // NOTA: Aggiungere semplicemente tutti i importFiles non si traduce bene in 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', // Questo sostituisce dataFilter: function() && JSON.parse( data ).
            processData: false, // Non elaborare i file
            contentType: false, // Imposta il content type a false poiché jQuery dirà al server che è una richiesta di query string


            beforeSend: function( jqXHR, settings ){
                // (OPZIONALE) Concetto alternativo AJAX.
                // Rimuove il vecchio IFrame se presente.
                var element = document.getElementById('import_IF');
                if ( element !== null ){
                    element.parentNode.removeChild( element );
                }
                // FINE (OPZIONALE).
            },
            success: function( data, textStatus, jqXHR ) {
                console.log( 'Risposta dalla funzione/metodo PHP AJAX.' );

                // Fai qualcosa con data.values

                // (OPZIONALE) Concetto alternativo AJAX.
                // Necessario per il download in 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);
                // FINE (OPZIONALE).
            },
            complete: function(jqXHR, textStatus){
                console.log( 'AJAX completato.' );

                // (OPZIONALE) Concetto alternativo AJAX.
                // Pulizia IFrame.
                var element = document.getElementById('import_IF');
                if ( element !== null ){
                    element.parentNode.removeChild( element );
                }
                // FINE (OPZIONALE).
            }
        });// Fine AJAX.
    });// Fine .submit().
});

PHP

<?php
class server {
    public function __construct() {
        // Esempio per aggiungere script.
        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();
        // Fai qualcosa con i nuovi dati.
        update_option( 'example_database', $new_data );

        // (OPZIONALE) Aggiungi dati da restituire ad AJAX Success
        $rtn_data = array(
            'action'               => 'apl_import',
            '_ajax_nonce'          => wp_create_nonce( 'alt_ajax' ),
        );
        echo json_encode( $rtn_data );
        // FINE (OPZIONALE).

        die();
    }
}
?>