複数の入力ファイルを含むJSONファイルアップロード

Question

以下のコードを使用して複数のファイルをアップロードしようとしていました。しかし、最初の入力ファイルにアップロードするたびに、応答は2番目の入力ファイルに表示され、その逆も同様です。

CSSとスクリプト：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<style> 
    #dropBox{ 
     border: 3px dashed #0087F7; 
     border-radius: 5px; 
     background: #F3F4F5; 
     cursor: pointer; 
    } 
    #dropBox{ 
     max-width: 250px; 
     max-height: 50px; 
     box-sizing: border-box; 
    } 
    #dropBox p{ 
     text-align: center; 
     font-size: 16px; 
     text-decoration-color: #0087F7; 
     font-weight: normal; 
    } 
    #fileInput{ 
     display: none; 
    } 
</style> 
<script> 
    $(function(){ 
     //file input field trigger when the drop box is clicked 
     $("#dropBox").click(function(){ 
      $("#fileInput").click(); 
     }); 

     //prevent browsers from opening the file when its dragged and dropped 
     $(document).on('drop dragover', function (e) { 
      e.preventDefault(); 
     }); 

     //call a function to handle file upload on select file 
     $('input[type=file]').on('change', fileUpload); 
    }); 

    function fileUpload(event){ 
     //notify user about the file upload status 
     $("#dropBox").html(event.target.value+" uploading..."); 

     //get selected file 
     files = event.target.files; 

     //form data check the above bullet for what it is 
     var data = new FormData(); 

     //file data is presented as an array 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      if(!file.type.match('application/pdf')) { 
       //check file type 
       $("#dropBox").html("Please choose only PDF file."); 
      }else if(file.size > 1048576){ 
       //check file size (in bytes) 
       $("#dropBox").html("Sorry, your file is too large (>1 MB"); 
      }else{ 
       //append the uploadable file to FormData object 
       data.append('file', file, file.name); 

       //create a new XMLHttpRequest 
       var xhr = new XMLHttpRequest(); 

       //post file data for upload 
       xhr.open('POST', 'upload.php', true); 
       xhr.send(data); 
       xhr.onload = function() { 
        //get response and show the uploading status 
        var response = JSON.parse(xhr.responseText); 
        if(xhr.status === 200 && response.status == 'ok'){ 
         $("#dropBox").html("File has been uploaded successfully. Click to upload another."); 
        }else if(response.status == 'type_err'){ 
         $("#dropBox").html("Please choose a PDF file. Click to upload another."); 
        }else{ 
         $("#dropBox").html("Some problem occured, please try again."); 
        } 
       }; 
      } 
     } 
    } 
</script> 
<style> 
    #dropBoxB{ 
     border: 3px dashed #0087F7; 
     border-radius: 5px; 
     background: #F3F4F5; 
     cursor: pointer; 
    } 
    #dropBoxB{ 
     max-width: 250px; 
     max-height: 50px; 
     box-sizing: border-box; 
    } 
    #dropBoxB p{ 
     text-align: center; 
     font-size: 16px; 
     text-decoration-color: #0087F7; 
     font-weight: normal; 
    } 
    #fileInputB{ 
     display: none; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
    $(function(){ 
     //file input field trigger when the drop box is clicked 
     $("#dropBoxB").click(function(){ 
      $("#fileInputB").click(); 
     }); 

     //prevent browsers from opening the file when its dragged and dropped 
     $(document).on('drop dragover', function (e) { 
      e.preventDefault(); 
     }); 

     //call a function to handle file upload on select file 
     $('input[type=file]').on('change', fileUploadB); 
    }); 

    function fileUploadB(event){ 
     //notify user about the file upload status 
     $("#dropBoxB").html(event.target.value+" uploading..."); 

     //get selected file 
     files = event.target.files; 

     //form data check the above bullet for what it is 
     var dataB = new FormData(); 

     //file data is presented as an array 
     for (var i = 0; i < files.length; i++) { 
      var fileB = files[i]; 
      if(!fileB.type.match('application/pdf')) { 
       //check file type 
       $("#dropBoxB").html("Please choose only PDF file."); 
      }else if(fileB.size > 1048576){ 
       //check file size (in bytes) 
       $("#dropBoxB").html("Sorry, your file is too large (>1 MB"); 
      }else{ 
       //append the uploadable file to FormData object 
       dataB.append('file', fileB, fileB.name); 

       //create a new XMLHttpRequest 
       var xhrB = new XMLHttpRequest(); 

       //post file data for upload 
       xhrB.open('POST', 'uploadB.php', true); 
       xhrB.send(dataB); 
       xhrB.onload = function() { 
        //get response and show the uploading status 
        var responseB = JSON.parse(xhrB.responseText); 
        if(xhrB.status === 200 && responseB.status == 'ok'){ 
         $("#dropBoxB").html("File has been uploaded successfully. Click to upload another."); 
        }else if(responseB.status == 'type_err'){ 
         $("#dropBoxB").html("Please choose a PDF file. Click to upload another."); 
        }else{ 
         $("#dropBoxB").html("Some problem occured, please try again."); 
        } 
       }; 
      } 
     } 
    } 
</script> 

HTML：事前みんなで

<div class="container"> 
    <h2>Ajax File Upload using jQuery and PHP</h2> 
    <form> 
     <div id="dropBox"> 
      <p>Select file to upload</p> 
     </div> 
     <input type="file" name="fileInput" id="fileInput" /> 
    </form> 
</div> 
<div class="container"> 
    <h2>Ajax File Upload using jQuery and PHP</h2> 
    <form> 
     <div id="dropBoxB"> 
      <p>Select file to upload</p> 
     </div> 
     <input type="file" name="fileInputB" id="fileInputB" /> 
    </form> 
</div> 

おかげ

は、以下の私のコードです！

私は以下のコードを使用して複数のファイルをアップロードしようとしていました。しかし、最初の入力ファイルにアップロードするたびに、応答は2番目の入力ファイルに表示され、その逆も同様です。

上記の私のコードは次のとおりです。

Answer 1

は以下にご変更イベントを変更：

$('input[name="fileInput"]').on('change', fileUpload); 
$('input[name="fileInputB"]').on('change', fileUploadB);