javascript - 如何传递通过JS函数上传的多张图片，然后通过表单提交？-6ren

javascript - 如何传递通过JS函数上传的多张图片，然后通过表单提交？

转载作者：行者123 更新时间：2023-11-28 03:50:10

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

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

}

但是，图像文件没有随表单一起提交...如果我去掉该行中的“多个”语句，那么此代码将成功传递一张图像。如有任何帮助，我们将不胜感激。

最佳答案

我不确定你的问题出在哪里，但我自己测试过，它在多个文件上运行得很好:

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