How to upload image on server using ajax jquery?-CodePudding

Actually I'm trying to upload a image on server using ajax jquery?

My Code:-

$(function(){
$('#uploadFile').submit(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
  
  $.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       success : function(data) {
           console.log(data);
           alert(data);
       }
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="uploadFile">
<input type="file" id="file" />
<button type="submit">Submit</button>
</form>

Thankyou for your efforts!

CodePudding user response：

$(function(){
$('#uploadFile').submit(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
    $.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       contentType: false, // You need to add this
       processData: false,// You need to add this also
       success : function(data) {
           console.log(data);
           alert(data);
       }
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="uploadFile">
<input type="file" id="file" />
<button type="submit">Submit</button>
</form>