akhileshdarjee/send files images and documents via ajax.html

## send files images and documents via ajax.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">Save</button>
		</form>
		<script type="text/javascript">
			$("#save").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-user',
					data: details,
					processData: false,
					contentType: false,
					success: function(data) {
						console.log("user updated successfully");
					},
					error: function(e) {
						console.log("error");
					}
				});
			});
		</script>
	</body>
</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">Save</button>
	</form>
	<script type="text/javascript">
	$("#save").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-user',
	data: details,
	processData: false,
	contentType: false,
	success: function(data) {
	console.log("user updated successfully");
	},
	error: function(e) {
	console.log("error");
	}
	});
	});
	</script>
	</body>
	</html>