如何傳遞通過JS函數上傳的多個圖像，然后與表單一起提交？

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 個解決方案

解決方案1
0 已采納 2018-01-02 17:40:40

如何傳遞通過JS函數上傳的多個圖像，然后與表單一起提交？

問題描述

1 個解決方案

解決方案1 0 已采納 2018-01-02 17:40:40

解決方案1
0 已采納 2018-01-02 17:40:40