jQuary asynchroon uploaden maar koppelen twee bestanden in een upload

stemmen
0

Ik heb een bestand te uploaden vorm die het mogelijk maakt te selecteren zoveel bestanden (alleen .xml en .yml bestanden) als u wilt uploaden. Het formulier wordt gemaakt met blueimp's jQuery bestand uploaden . Ik gebruikte de informatie in deze Vraag alles werkend te krijgen.

De .xml en .yml bestanden komen altijd in paren en andere informatie om een ​​data blok bevatten. De geüploade bestanden worden behandeld door een apart .php bestand. Er controleer ik of het bijbehorende bestand al is geüpload. Als dat het geval ik het starten van een proces om beide bestanden te verwerken.

Het werkt prima in de meeste gevallen, maar soms krijg ik via de kabel return berichten en het lijkt erop dat het mogelijk is om het ontleden en te verwerken code twee keer starten. Mijn vermoeden is dat het desbetreffende dossier net klaar met het uploaden voordat het eerste bestand gecontroleerd of beide bestaan. Dan begint het eerste bestand van het proces en het tweede bestand begint het ook.

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;

Om dit te verhelpen, wil ik de twee bestanden op de client-side koppelen en beide bestanden tegelijk uploaden. Om het herschrijven van de servers PHP script zoals dit is geen probleem, maar hoe kan ik controleren en de groep van de bestanden in JS?

Het is duidelijk, ik moet uitstellen var jqXHR = data.submit();in de add: function. Maar ik heb een paar vragen:

  1. Waar en Hoe krijg ik toegang tot de volledige lijst met geselecteerde bestanden te krijgen?

  2. Toen ik de bijbehorende bestanden hebt gekoppeld, hoe kan ik leiden tot een twee bestand uploaden?

Hier is een kleinere versie van mijn formulier voor het uploaden:

<!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>
De vraag is gesteld op 24/10/2019 om 12:53
bron van user
In andere talen...                            

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