How do I pass multiple images uploaded through a JS function and then submitted with the form?

Question

I'm trying to have multiple images uploaded by a user passed through a function and then processed with the submit of the form. I have the following form which takes in the users upload files:

<form id="formUploadFile" action="<?php echo $uploadHandler ?>" 
        enctype="multipart/form-data" method="post" > 
        <p> 
        <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>"> 
    </p> 

    <p align="center"> 
        <label for="file" >First, Choose up to 20 images!</label> 
        <input type="file" name="files[]" multiple /> 
    </p> 
    </p>
    <p class="text-center"> 
        <h5>Then, Choose your Difficulty!</h5>
            <div class="btn-group">n>
            <button type="button" class="btn btn-success"  value="Novice" onclick="changeDifficulty(1)">Novice</button>
            <button type="button" class="btn btn-success"  value="Intermediate" onclick="changeDifficulty(2)">Intermediate</button>
          </div>

    </p> 
</form>

And then I have the following function which takes in the difficulty choice, displays a loading circle and then should submit the form with the multiple images:

<script>


    function changeDifficulty(number){
        var difficulty = document.getElementById('hiddDiff');
      var form = getElementById('formUploadFile');
    difficulty.value = number;

 document.getElementById('hide-div').style.display='none';
    document.getElementById('hide-div2').style.display='none';
    document.getElementById('loadingScreen').style.display='block';
        form.submit();

}

However, the image files are not being submitted with the form... if I take away the "multiple" statement in the line, then this code will pass one image successfully. Any help is appreciated.

Have you tried formdata with ajax or xmlhttpreq? https://developer.mozilla.org/en-US/docs/Web/API/FormData — Gary, Jan 02 '18 at 16:41
When you do either way, what does your var_dump of $_FILES look like? Add those results to your question. — IncredibleHat, Jan 02 '18 at 16:43
Does this help: https://stackoverflow.com/questions/24895170/multiple-image-upload-php-form-with-one-input — Rick, Jan 02 '18 at 16:47

score 0 · Accepted Answer · answered Jan 02 '18 at 17:40

I'm not sure where your issue is, but I've tested this myself and it's working perfectly fine with multiple files:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script type="text/javascript">
        var time = 0;
        var form;

        // Make sure the DOM is loaded
        document.addEventListener("DOMContentLoaded", function(event) {
            // Add event listener to the form submit
            document.getElementById("formUploadFile").addEventListener("submit", function(e) {
                // Display the loading image
                document.getElementById('loadImg').style.display='block';

                // Prevent the form submit unless time is equal to 3
                form = function(){
                    // Time is equal to 3, so submit the form
                    if(time === 3){
                        document.getElementById("formUploadFile").submit();
                    } else {
                        // Repeat the form function every second and increase time by 1 on each loop
                        setTimeout(form, 1000);
                        time++;
                        e.preventDefault();
                    }
                }
                form();
            });
        });
        </script>
    </head>
    <body>
        <img id="loadImg" src="load.gif" style="display:none;">
        <form id="formUploadFile" name="upload" action="upload.php" method="POST" enctype="multipart/form-data">
            Select images to upload: <input type="file" name="image[]" multiple>
            <input type="submit" name="upload" value="upload">
        </form>
    </body>
</html>

I've put comments inside the code that explain what's happening.

How do I pass multiple images uploaded through a JS function and then submitted with the form?

1 Answers1