📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › jQuery in Practice › AJAX File Upload

AJAX File Upload

5 min read
Upload files asynchronously with FormData and $.ajax() using processData: false and contentType: false. Attach an XHR upload progress listener via the xhr option to show a real upload progress bar to users.

File Upload via AJAX

$('#upload').on('submit', function(e) {
  e.preventDefault();
  const fd = new FormData(this);

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: fd,
    processData: false,
    contentType: false,
    success: function(res) {
      console.log('Uploaded', res);
    }
  });
});