Upload file on select browse file event

This is the example to show browse button on image on mouse over and remove then on mouse leave using css and javascript and upload file on select browse file event using Coldfusion,CSS and Jquery.

After mouse over shows browse image button.

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
	<script>
	$(document).ready(function(e)
	{
	<!---************Start: Image Upload Function On select browse Image--->
	$('#file_browse').on('change', function()
	{
	var formData = $('#addPlayerImage').serializefiles();
	$.ajax({
	url: 'uploadplayerImage.cfm', //server script to process data
	type: 'POST',
	xhr: function() { // custom xhr
	myXhr = $.ajaxSettings.xhr();
	if(myXhr.upload){ // check if upload property exists
	//myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
	}
	return myXhr;
	console.log(myXhr);
	},
	//Ajax events
	//beforeSend: beforeSendHandler,
	success: completeHandler,
	error: errorHandler,
	// Form data
	data: formData,
	//Options to tell JQuery not to process data or worry about content-type
	cache: false,
	contentType: false,
	processData: false
	});
	});
	(function($) {
	$.fn.serializefiles = function() {
	var obj = $(this);
	/* ADD FILE TO PARAM AJAX */
	var formData = new FormData();
	$.each($(obj).find("input[type='file']"), function(i, tag) {
	$.each($(tag)[0].files, function(i, file) {
	formData.append(tag.name, file);
	});
	});
	var params = $(obj).serializeArray();
	$.each(params, function (i, val) {
	formData.append(val.name, val.value);
	});
	return formData;
	};
	})(jQuery);
	function completeHandler(e)
	{
	document.location.reload();
	}
	function errorHandler(e)
	{
	alert('Error in Image upload. ');
	}
	<!---************END: Image Upload Function On select browse Image--->
	<!---*********** Start: Upload Image Over and Leaver functions--->
	$("#viewPlayerImage, #file_browse_wrapper").mouseover(function()
	{
	$("#file_browse_wrapper").css('display', 'block');
	});
	$("#viewPlayerImage").mouseleave(function()
	{
	$("#file_browse_wrapper").css('display', 'none');
	});
	<!---*********** END: Upload Image Over and Leaver functions--->
	});
	</script>
	<style>
	.file_browse_wrapper {
	background: url('images/file_browse_hover.png') 0 0 no-repeat;
	border: medium none;
	height: 28px;
	margin-left: 1%;
	margin-top: -4%;
	overflow: hidden;
	position: absolute;
	width: 93px;
	z-index: 15;
	display:none;
	}
	.file_browse{
	margin-left:-145px;
	opacity:0.0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	.text{
	border-bottom: 1px inset ##EFE4E0;
	padding: 2px 0;
	padding-right:15px
	}
	</style>
	<table cellpadding="0" cellspacing="10" border="0" width="200">
	<tr>
	<td valign="top" width="200" class="text">
	<Cfform name="addPlayerImage" id="addPlayerImage" enctype="multipart/form-data">
	<cfif FileExists("#ExpandPath('uploads')#/1.jpg")>
	<img src="uploads/1.jpg" height="200" id="viewPlayerImage">
	<cfelse>
	<img src="images/a.jpg" height="200" id="viewPlayerImage">
	</cfif>
	<div id='file_browse_wrapper' class="file_browse_wrapper">
	<input type='file' name="playerImage" id='file_browse' class="file_browse" />
	</div>
	</Cfform>
	</td>
	</tr>
	</table>

view raw playerimage.cfm hosted with ❤ by GitHub

	<cffile action = "upload"
	fileField = "playerImage"
	destination = "C:\ColdFusion10\cfusion\wwwroot\Test\uploads\1.jpg"
	nameConflict = "Overwrite">

view raw uploadplayerImage.cfm hosted with ❤ by GitHub