title: JSON File upload with multiple input file
body: <p>I was trying to upload multiple files using the below codes. But whenever I upload in the first Input File the response appears in the second Input File and vice versa. </p>
  
  <p>below are my codes: </p>
  
  <p>CSS and Script:</p>
  
  <pre><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      #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;
      }
  &lt;/style&gt;
  &lt;script&gt;
      $(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 &lt; 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 &gt; 1048576){
                  //check file size (in bytes)
                  $("#dropBox").html("Sorry, your file is too large (&gt;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 &amp;&amp; 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.");
                      }
                  };
              }
          }
      }
  &lt;/script&gt;
  &lt;style&gt;
      #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;
      }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(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 &lt; 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 &gt; 1048576){
                  //check file size (in bytes)
                  $("#dropBoxB").html("Sorry, your file is too large (&gt;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 &amp;&amp; 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.");
                      }
                  };
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;Ajax File Upload using jQuery and PHP&lt;/h2&gt;
      &lt;form&gt;
          &lt;div id="dropBox"&gt;
              &lt;p&gt;Select file to upload&lt;/p&gt;
          &lt;/div&gt;
          &lt;input type="file" name="fileInput" id="fileInput" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;h2&gt;Ajax File Upload using jQuery and PHP&lt;/h2&gt;
      &lt;form&gt;
          &lt;div id="dropBoxB"&gt;
              &lt;p&gt;Select file to upload&lt;/p&gt;
          &lt;/div&gt;
          &lt;input type="file" name="fileInputB" id="fileInputB" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in Advance guys! </p>
  
  <p>I was trying to upload multiple files using the below codes. But whenever I upload in the first Input File the response appears in the second Input File and vice versa.</p>
  
  <p>above are my codes:</p>