FormData Object

->Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string.
And Setting the contentType to false is imperative.

Refference link: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

//01// File Upload using FormData Object in Javascript
Syntax:
var formData = new FormData(); // Currently empty
formData.append(name, value); // custom text field where key/value pair
formData.append(name, value, filename); // Custom file uploading
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg'); // Custom multiple file uploading with the same name
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

i.e 01:
	<form action="" enctype="multipart/form-data">
		<input type="file" name="myfile[]" multiple />
		<input type="submit" />
	</form>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
	<script>
		var request = new XMLHttpRequest();
		request.upload.addEventListener("load",function(e){
			console.log("Uploaded successfull");
		}, false);
		var form = document.querySelector("form");
		form.addEventListener("submit",function(e){
			e.preventDefault();
			var formData = new FormData(form);
			request.open("POST", "main.php");
			request.send(formData);
		}, false);
	</script>
//PHP
<?php
	//print_r($_FILES);
	foreach($_FILES["myfile"]["name"] as $index=>$image_name){
		if(move_uploaded_file($_FILES["myfile"]["tmp_name"][$index], "images/".$image_name)){
			$upload[] = $image_name;
		}
	}
	echo json_encode($upload);
?>
	
i.e 02: =>Form Objects selecting:
<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" value="bb@gmail.com" id="jj" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>

  <input type="submit" value="Stash the file!" />
</form>

<script>
	//var formData = document.forms.namedItem("fileinfo");
	//var formData = document.forms[0].length; // 4 elements
	//var formData = document.forms[0].elements[1].name; // select 2nd elements name
	//var formData = document.fileinfo.userid.type; // select using name attribute or only obj not arrray
	//var formData = document.fileinfo.userid.value; // select value of the element
	alert(formData);
</script>

//03//Excel File Upload
<div class="choice-excel-file-action" style='position: absolute; left: 40px; bottom: 90px; width: 190px; height: 59px;'>
	<button style='background: white; border: 1px solid #292828; font-size: 20px; padding: 2px 15px; border-radius: 5px; color: #292828; position: absolute; text-align: center; width: 100%; height: 100%;' onClick="$('#input_excel_file_buyer_quotation').click()">ファイルを<br>選択</button>

	<input id="input_excel_file_buyer_quotation" type="file" style='position: absolute; height: 100%; width: 100%; opacity: 0;' required="" onChange="readFiles(this)">
</div>
function readFiles(input){
	var formData = new FormData();
	//var files = $(input)[0].files;
	//formData.append("quotation", files[0]);
	formData.append("quotation", document.getElementById("input_excel_file_buyer_quotation").files[0]);
}
			

//01// File Upload Using Ajax
var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

//02//
div id="data"></div>
    <form>
        <input type="file" name="userfile" id="userfile" size="20" />
        <br /><br />
        <input type="button" id="upload" value="upload" />
    </form>

	<script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'main.php',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
	</script>
  
  //03//
  <form id="upload_form" enctype="multipart/form-data">
jQuery with CodeIgniter file upload:

var formData = new FormData($('#upload_form')[0]);

formData.append('tax_file', $('input[type=file]')[0].files[0]);

$.ajax({
    type: "POST",
    url: base_url + "member/upload/",
    data: formData,
    //use contentType, processData for sure.
    contentType: false,
    processData: false,
    beforeSend: function() {
        $('.modal .ajax_data').prepend('<img src="' +
            base_url +
            '"asset/images/ajax-loader.gif" />');
        //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
        $(".modal").modal("show");
    },
    success: function(msg) {
        $(".modal .ajax_data").html("<pre>" + msg +
            "</pre>");
        $('#close').hide();
    },
    error: function() {
        $(".modal .ajax_data").html(
            "<pre>Sorry! Couldn't process your request.</pre>"
        ); // 
        $('#done').hide();
    }
});
you can use.

var form = $('form')[0]; 
var formData = new FormData(form);     
formData.append('tax_file', $('input[type=file]')[0].files[0]);
or

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]); 

  ///////Dummy///////////
     
  $("#uploadedfile")[0].files[0] and $(this)[0].files[0] or this.files[0];
  //Another
  The files selected are stored in an array: [input].files

For example, you can access the items

// assuming there is a file input with the ID `my-input`...
var files = document.getElementById("my-input").files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}
For jQuery-comfortable people, it's similarly easy

// assuming there is a file input with the ID `my-input`...
var files = $("#my-input")[0].files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}
//Another
function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});
and the associated HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>
//another