File uploads are normally initiated using a straightforward form post. If you want to initiate an upload using AJAX, you need to write some javascript to use the XmlHttpRequest (XHR) object, something like this (using jQuery):
<script>
function submit (e){
e.preventDefault = true;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', 'Profile/EditProfile', true);
xhr.setRequestHeader("Content-Type","multipart/form-data");
var formData = new FormData();
formData.append("imageFile", $("#imageFile").files[0]);
formData.append("coverFile", $("#coverFile").files[0]);
// etc
xhr.send(formData);
};
</script>
Note that you populate the javascript FormData object in code using the values from your form elements. Then wire this function to your submit button's click event:
<button type="button" name="Save" onclick="submit()" class="btn btn-default btn-xs">Save Changes</button>
You can also remove the Ajax form in your view as it won't be needed when using this approach.