jQuary in modo asincrono caricare ma accoppiare due file in uno di upload

voti
0

Ho una forma di upload di file che permette di selezionare tutti i file (solo file .xml e .yml) come si desidera caricare. La forma viene creata con del blueimp jQuery File Upload . Ho usato le informazioni in questa domanda per far funzionare tutto.

I file .xml e .yml arrivano sempre in coppia e contengono informazioni diverse da un blocco di dati. I file caricati sono gestite da un file .php separato. Ci verifico se il file corrispondente è già caricato. Se questo è il caso di iniziare un processo per gestire entrambi i file.

Funziona bene nella maggior parte dei casi, ma a volte ricevo messaggi di ritorno cablate e sembra che sia possibile iniziare il codice di analisi e il processo di due volte. Il mio sospetto è che il file corrispondente appena terminato il caricamento prima di controllare il primo file se sono entrambi presenti. Poi il primo file avvia il processo e il secondo file inizia pure.

function process_uploaded_data(&$response, $file_path) {
    $file_name = get_file_name($file_path);
    $yml_path = 'tmp/'. $file_name .'.yml';
    $xml_path = 'tmp/'. $file_name .'.xml';

    if(file_exists($xml_path) && file_exists($yml_path))
    {
        // parse and process yml and xml
    }
}

// A list of permitted file extensions
$allowed = array('xml', 'yml');

if(isset($_FILES['upl']) && 0 >= $_FILES['upl']['error']){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)) {
        $response['file'] = $_FILES['upl']['name'];
        $response['status'] = 'failed';
        echo json_encode($response);
        exit;
    }

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'tmp/'.$_FILES['upl']['name'])){
        $response['file'] = $_FILES['upl']['name'];
        $response['status'] = 'success';

        process_uploaded_data($response, 'tmp/'.$_FILES['upl']['name']);

        echo json_encode($response);
        exit;
    }
}

echo '{status:error}';
exit;

Per risolvere questo problema, vorrei accoppiare i due file sul lato client e caricare entrambi i file in una sola volta. Per riscrivere lo script server PHP come questo non è un problema, ma come faccio a controllare e raggruppare i file nella JS?

Ovviamente, devo ritardare var jqXHR = data.submit();nel add: function. Ma ho alcune domande:

  1. Dove e Come faccio a ottenere l'accesso all'elenco completo dei file selezionati?

  2. Quando ho abbinato i file corrispondenti, come posso innescare un upload di due file di?

Ecco una versione più piccola della mia forma di upload:

<!DOCTYPE html>
<html>
<head>
    <script src=javascripts/modernizr.js></script>
    <script src=javascripts/respond.min.js></script>
    <script src=javascripts/prefixfree.min.js></script>
    <script src=javascripts/jquery-3.4.1.min.js></script>

    <script src=javascripts/vendor/jquery.ui.widget.js></script>
    <script src=javascripts/jquery.iframe-transport.js></script>
    <script src=javascripts/jquery.fileupload.js></script>

    <script>
        $(function() {
            var ul = $('#upload ul');

            $('#upload').fileupload({
                url: 'sql_upload.php',
                dataType: 'text',
                type: 'post',

                // This function is called when a file is added to the queue
                add: function (e, data) {                   
                    //This area will contain file list and progress information.
                    var tpl = $('<li><p class=file_name></p></li>');

                    // Append the file name and file size
                    tpl.find('p').text(data.files[0].name);

                    // Add the HTML to the UL element
                    data.context = tpl.appendTo(ul);

                    // Automatically upload the file once it is added to the queue
                    var jqXHR = data.submit();
                },
                success: function(php_script_response){
                    console.log(php_script_response);
                }
            });
        })
    </script>
</head>
<body>
    <form id=upload enctype=multipart/form-data>
        <input type=file name=upl multiple />
        <ul id=fileList>
            <!-- The file list will be shown here -->
        </ul>
    </form>
</body>
</html>
È pubblicato 24/10/2019 alle 12:53
fonte dall'utente
In altre lingue...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more