jQuery Ajax File Upload Without Using a Plugin

File upload using jQuery's AJAX requires the use of XHR2, supported by modern browsers. If you want to perform file upload using AJAX without a plugin, you need to use theFormDataobject.

Code:

 var formData = new FormData();
 formData.append("file", file); // Replace "file" with your file input element's name

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: formData,
    contentType: false,
    processData: false, // Don't process the form data, leave it as pure binary data
    success: function (data) {
        alert('success');
        return false;
    }
});

Notes:

• FormData object can also contain other data, such as text input fields.
• contentType and processData options are set to false to prevent jQuery from automatically converting the data as part of the AJAX request.
• You must include the file name in the formData object using the name attribute of the file input element.
• AJAX file upload may not be supported by all browsers. Check browser compatibility.