You can try the below javascript functions:
var getFileAsArrayBuffer = function (file) {
var dfd = $.Deferred();
var fr = new FileReader();
fr.onload = function (e) {
dfd.resolve(e.target.result);
}
fr.onerror = function (e) {
dfd.reject(e.target.error);
}
fr.readAsArrayBuffer(file);
return dfd.promise();
};
$("#uploadFile").change(function(){
getFileAsArrayBuffer($("#uploadfile")[0].files[0]).then(function(arrayBuffer) {
var dfd = $.Deferred();
$.ajax({
url:"https://sitecollectionurl/_api/SP.UserProfiles.PeopleManager/SetMyProfilePicture",
type: "POST",
data: arrayBuffer,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
"content-length": arrayBuffer.byteLength
},
success: function (data) {
console.log('sucessfully updated my profile picture');
dfd.resolve(data);
},
error: function (err) {
console.log("something went wrong" + err);
dfd.reject(err);
}
});
});
});
And your html would be as:
<input type="file" id="uploadFile" />
Modified from - User profiles REST API reference