How to Upload Multiple File type Input in one Go?

How to Upload Multiple File type Input in one Go?

I have 4 categories on my form. Each has 2 file type input. Here is an example of one:

  1.                 <div class="row">
  2.                     <div class="file-field input-field col s6">
  3.                         <div class="btn">
  4.                             <span>MANILA</span>
  5.                             <input type="file" id="mnl_process">
  6.                         </div>
  7.                         <div class="file-path-wrapper">
  8.                             <input class="file-path validate" type="text">
  9.                         </div>
  10.                     </div>
  11.                     <div class="file-field input-field col s6">
  12.                         <div class="btn">
  13.                             <span>IN-COUNTRY</span>
  14.                             <input type="file" id="inc_process">
  15.                         </div>
  16.                         <div class="file-path-wrapper">
  17.                             <input class="file-path validate" type="text">
  18.                         </div>
  19.                     </div>
  20.                 </div>

So I need 4 of that code all I have to do is change the id from mnl_x to inc_x where x is the name of the category. In this case the category name is process.

I know AJAX, jQuery and PHP but I haven't tried to do uploads.

How should I approach this properly? So I can attach it under one button.

Here is my jQuery idea:


  1.         $("#upload_values").click(function() {
  2.             $("input[type=file]").each(function(){
  3.                 //I'll insert ajax post here but I don't know how upload
  4.             }); 
  5.       });