How to write a equivalent code using jquery

Question

User264732274 posted

first see the below code where javascript is used to make ajax call using XMLHttpRequest. just tell me how to convert the code to jquery ajax

function uploadFile(file) {
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log("Uploaded percentComplete + "%");
    };

    xhr.onload = function() {
        if (xhr.status == 200) {
            alert("Sucess! Upload completed");
        } else {
            alert("Error! Upload failed");
        }
    };

    xhr.onerror = function() {
        alert("Error! Upload failed. Can not connect to server.");
    };

    xhr.open("POSTileUploader", true);
    xhr.setRequestHeader("Content-Type", file.type);
    xhr.send(file);
}

this js code is mandatory when we send file to server side xhr.setRequestHeader("Content-Type", file.type); ?

when we use jquery ajax then how to implement onprogress to show upload progress ?

    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log("Uploaded percentComplete + "%");
    };

thanks