playerimage.cfm

<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>              

uploadplayerImage.cfm

<cffile action = "upload"

    fileField = "playerImage"

    destination = "C:\ColdFusion10\cfusion\wwwroot\Test\uploads\1.jpg"

    nameConflict = "Overwrite">