<tr>

    <td>Avatar</td>

    <td><input type="hidden" name="ctl00$cphMain$ucProfile$Avatar$hffulList"

               id="ctl00_cphMain_ucProfile_Avatar_hffulList"

               value="[{&quot;FileName&quot;:&quot;3004057.png&quot;,&quot;Size&quot;:&quot;1550&quot;,&quot;ContentType&quot;:&quot;image/png&quot;,&quot;PhysicalName&quot;:&quot;7778181a-1dad-4898-9c21-df416f812405.png&quot;,&quot;NewPhysicalName&quot;:null,&quot;FileuploadId&quot;:&quot;0&quot;,&quot;FilePath&quot;:null}]">

        <script type="text/javascript">$(function () {

            function JsonToString(json) {

                var str = '';

                for (var key in json) {

                    if (json[key] == null) {

                        str = str + ',"' + key + '":' + json[key];

                    } else {

                        str = str + ',"' + key + '":' + '"' + json[key] + '"';

                    }

                }

                if (str.length > 0) {

                    str = str.substring(1);

                    str = '{' + str + '}';

                }

                return str;

            };

            function JsonArrayToString(jsonAry) {

                var str = '';

                var strItem;

                for (var i = 0; i < jsonAry.length; i++) {

                    strItem = JsonToString(jsonAry[i]);

                    if (strItem.length > 0) {

                        str = str + ',' + strItem;

                    }

                }

                if (str.length > 0) {

                    str = str.substring(1);

                    str = '[' + str + ']';

                }

                return str;

            };

            $(document).on('click', '.LISA_FileuploadResultFileAction', function () {

                var $trDel = $(this).parent().parent();

                var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val());

                var jsonItem = jsonAry[$trDel.index()];

                jsonAry.splice($trDel.index(), 1);

                $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry));

                $trDel.remove();

                if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length = 0) $('#Avatar_Result').hide();

            });

            $('#Avatar').fileupload({

                maxChunkSize: 1048576,

                paramName: '1f041c67-b5db-4599-a9ab-3f1614a651b5',

                url: 'http://172.31.212.20/LISA_60_Dev_BackOffice/Pages/jQueryHandler.ashx',

                dataType: 'json',

                add: function (e, data) {

                    $('#Avatar_ProcessContent').css('width', '0%').html('');

                    $('#Avatar_ProcessWrap').show();

                    var acceptFileTypes = /(\.)(png|gif|jpeg|jpg|pdf|bmp|xls|xlsx|doc|docx|ppt|pptx|zip|rar)$/i;

                    var ext = data.originalFiles[0]['name'].substr(data.originalFiles[0]['name'].lastIndexOf(".")).toLowerCase();

                    if (ext.length > 0 && acceptFileTypes.test(ext)) {

                        data.submit();

                    } else {

                        $('#Avatar_ProcessWrap').hide();

                        alert('Not an accepted file type');

                    }

                },

                done: function (e, data) {

                    var newItem = data.result;

                    $('#Avatar_ProcessWrap').hide();

                    if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length == 0) {

                        var newItemStr = JsonToString(newItem);

                        newItemStr = '[' + newItemStr + ']';

                        $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(newItemStr);

                    } else {

                        var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val());

                        jsonAry.push(newItem);

                        $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry));

                    }

                    var action = '';

                    action = '<td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td>';

                    $('#Avatar_Result').append('<tr><td><a href="/LISA_60_Dev_BackOffice/FileTemps/' + newItem.PhysicalName + '" target="_black">' + newItem.FileName + '</a></td><td>' + newItem.Size + '&nbsp;Byte</td><td>' + newItem.ContentType + '</td>' + action + '</tr>');

                    $('#Avatar_Result').show();

                },

                progressall: function (e, data) {

                    var progress = parseInt(data.loaded / data.total * 100, 10);

                    $('#Avatar_ProcessContent').css('width', progress + '%').html(progress + '%');

                },

            });

        });</script>

        <input id="Avatar" type="file">

        <div id="Avatar_ProcessWrap" class="LISA_FileuploadProcessWrap" style="display: none;">

            <div id="Avatar_ProcessContent" class="LISA_FileuploadProcessContent" style="width: 100%;">100%</div>

        </div>

        <table id="Avatar_Result" class="gridview" style="">

            <tr>

                <td><a href="/LISA_60_Dev_BackOffice/FileTemps/7778181a-1dad-4898-9c21-df416f812405.png"

                       target="_black">3004057.png</a></td>

                <td>1550&nbsp;Byte</td>

                <td>image/png</td>

                <td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td>

            </tr>

        </table>

    </td>

</tr>