jQuary forma assíncrona carregar mas emparelhar dois arquivos em um upload

votos
0

Eu tenho um formulário de upload de arquivos que permite selecionar tantos arquivos (somente arquivos .xml e .yml) como você deseja carregar. O formulário é criado com o blueimp jQuery File Upload . Eu usei a informação na presente Pergunta para ter tudo funcionando.

Os arquivos .xml e .yml sempre vêm em pares e contêm informações diferentes para um bloco de dados. Os arquivos enviados são tratados por um arquivo .php separado. Não posso verificar se o arquivo correspondente já está carregado. Se for esse o caso, eu iniciar um processo para lidar com ambos os arquivos.

Ele funciona muito bem na maioria dos casos, mas às vezes eu recebo mensagens de retorno com fio e parece que é possível para iniciar o código de análise e processo duas vezes. Minha suspeita é que o arquivo correspondente acabado de upload antes do primeiro arquivo verificado se ambos existem. Em seguida, o primeiro arquivo inicia o processo e o segundo arquivo começa-lo também.

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;

Para corrigir isso, eu gostaria de emparelhar os dois arquivos no lado do cliente e fazer upload de ambos os arquivos de uma vez. Para reescrever o script servidores PHP como este não é um problema, mas como faço para verificar e agrupar os arquivos em JS?

Obviamente, eu tenho que atrasar var jqXHR = data.submit();na add: function. Mas eu tenho algumas perguntas:

  1. Onde e como posso ter acesso à lista completa dos arquivos selecionados?

  2. Quando eu tiver emparelhado os arquivos correspondentes, como eu pode desencadear um upload de dois arquivo?

Aqui está uma versão menor de meu formulário de 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>
Publicado 24/10/2019 em 12:53
fonte usuário
Em outras línguas...                            

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