Error while uploading file asynchronously - php

Question

I am trying to upload file using ajax as below
Here is my html code:
<form id="upload-file" enctype="multipart/form-data" role="form"
method="POST">
<input type="file" name="image" id="file-data" />
<button type="submit" class="btn btn-warning" style="margin-top:10px;">
<a style="color:#fff;font-family:sans-serif;font-size:15px;">Submit</a>
</button>
</form>
jquery code:
$("#upload-file").on('submit', function(e){
var formURL="fileupload.php";
$('#message').html('Uploading File...');
$("#message").css("display","");
$.ajax(
{
url : formURL,
type: "POST",
data : new FormData(this),
cache: false,
processData:false,
success:function(data, textStatus, jqXHR)
{
if (data)
{
console.log(data);
var obj = JSON.parse(data);
$("#file-name span").html("");
$("#file-size span").html("");
$("#file-type span").html("");
//$("#file-error").html("");
$("#file-name span").html(obj['name']);
$("#file-size span").html(obj['size']);
$("#file-type span").html(obj['type']);
//$("#file-error").html(obj['error']);
$("#file-name").css("display","");
}
},
});
});
php code:
<?php
require('db_connect.php');
if(isset($_FILES['image'])){
//$errors= array();
$file['name'] = $_FILES['image']['name'];
//echo $file['name'];
$file_size =$_FILES['image']['size'];
$file['size'] = $file_size/1000;
$file_tmp =$_FILES['image']['tmp_name'];
$file['type']=$_FILES['image']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
$expensions= array("pdf");
if(in_array($file_ext,$expensions)=== false){
$file['error']="extension not allowed, please choose a pdf file.";
}
if($file_size > 2097152){
$file['error']='File size must be excately 2 MB';
}
if(empty($errors)==true){
move_uploaded_file($file_tmp,"fileoploaded/".$file_name);
}
else{
$file['error'] = "File could'nt be updates";
}
}
$data = json_encode($file, true);
//echo "done!";
echo $data;
?>
But i am getting following error:
<b>Warning</b>: Unknown: Input variables exceeded 1000.
To increase the limit change max_input_vars in php.ini. in
<b>Unknown</b> on line <b>0</b>
I can change max_input_vars to some higher value in case of large data
where i can guess the data before but not in case of file uploaded by user,
is there any other way to resolve this issue without changing
max_input_vars in php.ini?

Answer 1

You need to add contentType: false in $.ajax parameters.
Otherwise jquery will set it's default contentType ( default is application/x-www-form-urlencoded, with binary data in body it will split file to billion separate parts).