How to post multiple files by form in html-CodePudding

I set following file uploader by using apigateway. I can set two file uploader and I'd like to upload them at the same time by clicking single send button.

    <form method="post" action="https://xxxxx.execute-api.us-east-1amazonaws.com/default/fileUploader" enctype="multipart/form-data">        
        <p><h4>test1</h4><br>
        <input type="file" name="file1" size="30"><br></p>      
        <p><input type="submit" value="send"></p>        
    </form>

    <form method="post" action="https://xxxxx.execute-api.us-east-1.amazonaws.com/prod/test" enctype="multipart/form-data">        
        <p><h3>test2</h3><br>
        <input type="file" name="file1" size="30"></p>
      
        <p><input type="submit" value="send"></p>        
    </form>

But now there are two buttons and can upload only each of them. Are there any way to put together of this uploader ? Thanks

CodePudding user response：

All you have to do is add the multiple attribute to <input type="file" name="file1" size="30">, now try to select multiple files when browsing for files:

    <form method="post" action="https://xxxxx.execute-api.us-east-1amazonaws.com/default/fileUploader" enctype="multipart/form-data">        
        <p><h4>test1</h4><br>
        <input type="file" name="file1" size="30" multiple><br></p>      
        <p><input type="submit" value="send"></p>        
    </form>

Take a look here for a great explanation about the multiple attribute by W3Schools.

CodePudding user response：

Try this! Thanks :)

var elmFile = document.querySelectorAll('#myfile');
    elmFile.forEach((e,i)=>{
            const allSend = document.querySelector("#send-all"),
            btnOne = document.querySelector("#btn-click1"),
            btnTwo = document.querySelector("#btn-click2");
            if(allSend){
                allSend.addEventListener('click', ()=>{
                    if(!e.files.length == 0){
                        btnOne.click();
                        btnTwo.click();
                    } else if(i == 0){
                        if (e.files.length == 0) {
                            alert('Form 1 : file not found');   
                        }
                    } else if(i == 1) {
                        if (e.files.length == 0) {
                            alert('Form 2 : file not found');   
                        }
                    } else {
                        alert('Check form again!');
                    }
                });
            }
    });

*, *::before, *::after {
 box-sizing: border-box;
}

<form method="post" action="#file1" target="_blank" enctype="multipart/form-data">        
    <p><h4>test1</h4><br>
    <input type="file" name="file1" id="myfile" size="30"><br></p>      
    <p><input type="submit" id="btn-click1" value="send"></p>        
</form>

<form method="post" action="#file2"  enctype="multipart/form-data">        
    <p><h3>test2</h3><br>
    <input type="file" name="file1" id="myfile" size="30"></p>
    <p><input type="submit" id="btn-click2" value="send"></p>        
</form>
<button id="send-all">Send All</button>