Send files, images, documents via AJAX

print this page button

HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>User Form</title>
	</head>
	<body>
		<input type="hidden" name="user_id" value="1">
		<form name="user-form" id="user-form" enctype="multipart/form-data">
			<input type="file" name="image_file">
			<input type="text" name="name">
			<button type="button" title="Save" id="save-user">Save</button>
		</form>
	</body>
</html>

JavaScript:

$("#save-user").on("click", function() {
	var user_form = $(this).closest("#user-form");
	var details = new FormData($(user_form)[0]);

	// you can also append any custom paramter to form data, if not skip these
	// details.append('user_id', $('body').find('[name="user_id"]').val());

	$.ajax({
		type: 'POST',
		url: '/save-document',
		data: details,
		processData: false,
		contentType: false,
		success: function(data) {
			console.log("user updated successfully");
		},
		error: function(e) {
			console.log("error");
		}
	});
});