cannot upload file using ajax with formdata - ajax

Question

I have the following code in my form.
I try to upload the files via ajax using jquery.
Other data fields in the form was submitted fine. But i cant add FILES to the POST request.
Here is my html code:
<div class="form-group">
<div class="col-lg-2">
<label class="lab pull-right">Image:</label>
</div>
<div class="col-lg-2">
<input type="file" name="nimp" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-2">
<label class="lab pull-right">Thumb Image:</label>
</div>
<div class="col-lg-2">
<input type="file" name="ntimp" id="ntimp" required>
</div>
</div>
My JQ Code:
$(document).ready(function(e) {
$('button.submit').click(function(e) {
e.preventDefault();
var a=new FormData();
alert(a);
$('.edit_form_prod_div').hide();
$.ajax({
type:"POST",
url:"ep.php",
data:a,
cahe: false,
processData:false,
contentType: false,
success: function(response){
$('.edit_prod_response').html(response)
},
error:function(response)
{ alert("Error Occures"); }
});
$('.edit_prod_response').show();
});
});

Answer 1

Try This Code
<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
<input type="file" name="files"/><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$("#btnSubmit").click(function()
{
var form = $('#fileUploadForm')[0];
var data = new FormData(form);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "FileUploadHandler",
data: data,
processData: false, // Importent
contentType: false, // Importent
cache: false,
timeout: 600000,
success: function (data)
{ alert("File Uploaded...!")
}
});
});
</script>