Show (Display) selected file name in Label using jQuery in ASP.Net

Last Reply 8 months ago By arunkurmi

Posted 8 months ago

this script working fine i want to show the seleted file name in label so user can see the file name as it selectd

pls advice

    <script type="text/javascript">
        $(function () {
            $('[id*=flgcode]').change(function () {
                var image = $(this).closest('DIV').find($('[id*=imggcfiles]'));
                if (typeof (FileReader) != "undefined") {
                   var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp|.pdf|.xls|.xlsx|.doc|.docx|.dwg|.dxf|.fbx|.igs|.iges|.obj|.sat|.skp|.smt|.stp|.step|.stl|.gcode|.x3g|.f3d)$/;
                    $($(this)[0].files).each(function () {
                        var file = $(this);
                        if (regex.test(file[0].name.toLowerCase())) {
                            var extension = file[0].name.substr((file[0].name.lastIndexOf('.') + 1));
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                switch (extension) {
                                    case 'jpg':
                                    case 'jpeg':
                                    case 'gif':
                                    case 'png':
                                    case 'bmp':
                                        $(image).attr("src", e.target.result).attr("style", "");
                                        break;
                                    case 'pdf':
                                        $(image).attr("src", "../Icons/PDF.png").attr("style", "");
                                        break;
                                    case 'xls':
                                    case 'xlsx':
                                        $(image).attr("src", "../Icons/EXCEL.png").attr("style", "");
                                        break;
                                    case 'doc':
                                    case 'docx':
                                        $(image).attr("src", "../Icons/Doc.png").attr("style", "");
                                        break;
                                    default:
                                        $(image).attr("src", "../Icons/default.png").attr("style", "");
                                        break;
                                }
                            }
                            reader.readAsDataURL(file[0]);
                        } else {
                            alert(file[0].name + " is not a valid image file.");
                            return false;
                        }
                    });
                } else {
                    alert("This browser does not support HTML5 FileReader.");
                }
            });
        });
    </script>
Posted 8 months ago

Hi nauna,

I have modified the code. please check it.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=FileUpload1]').change(function () {
            var image = $(this).closest('DIV').find($('[id*=imggcfiles]'));
            if (typeof (FileReader) != "undefined") {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp|.pdf|.xls|.xlsx|.doc|.docx|.dwg|.dxf|.fbx|.igs|.iges|.obj|.sat|.skp|.smt|.stp|.step|.stl|.gcode|.x3g|.f3d)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var extension = file[0].name.substr((file[0].name.lastIndexOf('.') + 1));
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $('[id*=lblFileName]').html(file[0].name);
                            switch (extension) {
                                case 'jpg':
                                case 'jpeg':
                                case 'gif':
                                case 'png':
                                case 'bmp':
                                    $(image).attr("src", e.target.result).attr("style", "");
                                    break;
                                case 'pdf':
                                    $(image).attr("src", "../Icons/PDF.png").attr("style", "");
                                    break;
                                case 'xls':
                                case 'xlsx':
                                    $(image).attr("src", "../Icons/EXCEL.png").attr("style", "");
                                    break;
                                case 'doc':
                                case 'docx':
                                    $(image).attr("src", "../Icons/Doc.png").attr("style", "");
                                    break;
                                default:
                                    $(image).attr("src", "../Icons/default.png").attr("style", "");
                                    break;
                            }
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>
<form id="form1" runat="server">
<div>
    <asp:FileUpload ID="FileUpload1" runat="server" /><br />
    <asp:Label ID="lblFileName" Text="" runat="server" />
</div>
</form>