Upload Multiple Files with One File Input

Reference:

HTML:

<div class="upload">
	<input type="file" name="product_photo[]" value="" id="product_photo" class="upload_field" multiple="multiple">
	<button class="button bt_upload active">Upload</button>
</div>

CSS:

.wlightbox.new_post .upload .upload_field{
	/* Note: display:none on the input won't trigger the click event in WebKit.
    Setting visibility: hidden and height/width:0 works great. 
    
https://ericbidelman.tumblr.com/post/14636214755/making-file-inputs-a-pleasure-to-look-at
*/ visibility: hidden; width: 0; height: 0; }

Javascript:

var post_fun = {
  init: function(){
    var wrapper = this; 

    $('#bt_post').on('click', function(e){
      e.preventDefault();
      $('#win_new_post').wlightbox('show');
      //$('#win_friends_console .left .tabs li:first a').trigger('click');
    });

    wrapper.init_upload_form();
  }, 
  init_upload_form: function(){
    var $form = $('#product_photo_form');
    var $upload_field = $('#product_photo');
    var $upload_button = $('#win_new_post .bt_upload');
    var $submit_button = $form.find('.bt_submit');

    $upload_button.on('click', function(e){
      e.preventDefault();
      $upload_field.trigger('click');
    });

    //No submit button for now
    $submit_button.on('click', function(e){
      e.preventDefault();
      $form.submit();
    });

    $upload_field.on('change', function(){
      var value = $(this).val();
      //console.log('file selected: ' + value);return;
      if(value != null && value.length > 0){
        $form.submit();
      }
    });

    $form.submit(function() { 
      $(this).ajaxSubmit({
          beforeSubmit: function(arr, $form, options) {
              for(var i = 0; i < arr.length; i++){
                  var obj = arr[i];
   
                  if(obj.required == true && (obj.value == null || obj.value == '')){
                      alert('Please enter all required fields');
                      return false;
                  }
              }
   
              //$('#bt_submit').text('Processing...').attr('disabled', true);
              return true;
          }, 
          data: {
              
          }, 
          success: function(data, statusText, xhr, $form) { 
            //console.log(data);return;
            if(typeof data.status == 'undefined'){
                show_msg('Error', data);
            }else if(data.status == 'success'){
                show_msg('Info', 'Settings has been updated');
                refresh();
            }else{
                show_error('Error', data.response);
            }
          }, 
          error: function(){
              alert("ERROR");
          }
      }); 
   
      return false; 
    });
  }
}

PHP vlaues of $_FILES:

Array(    
	[product_photo] => Array        (            
		[name] => Array                (
			[0] => 156218_3965771977465_479668037_n.jpg                    
			[1] => hugs05.jpg                
		)            
		[type] => Array                (                    
			[0] => image/jpeg                    
			[1] => image/jpeg                
		)            
		[tmp_name] => Array                (                    
			[0] => /tmp/phpl1Mks4                    
			[1] => /tmp/phpjfhlBJ                
		)            
		[error] => Array                (                    
			[0] => 0                    
			[1] => 0                
		)            
		[size] => Array                (                    
			[0] => 129538                    
			[1] => 30443                
		)        
	)
)