如何使用ajax jquery在服务器上上传图像？

Question

实际上我正在尝试使用 ajax jquery 在服务器上上传图片？

我的代码：-

$(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>

感谢您的努力！

Answer 1

$(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>