Question

我正在尝试通过函数传递用户上传的多个图像，然后使用表单的提交进行处理。我有以下表单，其中包含用户上传文件：

<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>

然后我有以下功能，它接受难度选择，显示加载圈，然后应该提交带有多个图像的表单：

<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();

}

但是，图像文件没有与表单一起提交...如果我删除了行中的“multiple”语句，那么此代码将成功传递一个图像。任何帮助表示赞赏。

Answer 1

我不确定您的问题在哪里，但我自己对此进行了测试，并且它可以很好地处理多个文件：

<!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>

我已经在代码中添加了注释来解释发生了什么。

如何传递通过JS函数上传的多个图像，然后随表单一起提交？

1 个答案: