locked
Format FileUpload Control RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User158811806 posted

    How do I format the FileUpload control?

    I want to

    Change Button caption to "Select File" and Button Height to a bit larger

    The label "No File chosen" to Blank 

    Move Button a bit to the right

    Add some extra space between Button and the selected file's label

    Thursday, August 13, 2020 4:54 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-821857111 posted

    The browser's file upload control itself cannot be styled, but there are ways to change its appearance, such as by hiding it and using another control that you can style as a proxy for it. There are some hacks listed here: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 13, 2020 6:17 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi njehan01,

    Accroding to your description,as far as I think,the FileUpload Control cann't change it style.You could custome a button and label to replace FileUpload Control.And then you could set css style to change the format.

    Just like this:

    <head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $('#myfile').change(function () {
                $('#Label1').text($(this).val());
            }); 
        })

    </script>
    <style>
        .file input[type="file"] {
            z-index: 999;
            line-height: 0;
            font-size: 50px;
            ;
            opacity: 0;
            filter: alpha(opacity = 0);
            -ms-filter: "alpha(opacity=0)";
            cursor: pointer;
            margin: 0;
            padding: 0;
            left: 0;
        }

        .add-photo-btn {
            ;
            overflow: hidden;
            cursor: pointer;
            text-align: center;
            background-color: #83b81a;
            color: #fff;
            display: block;
            width: 120px;
            height: 26px;
            font-size: 18px;
            line-height: 30px;
            float: left;
            margin-left: 20px;
        }
        #Label1 {
            margin-left: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="file">
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <label class="add-photo-btn">
                Select File<span><input type="file" id="myfile" name="myfile" /></span>
            </label>
        </div>

    </form>
</body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 14, 2020 2:19 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-821857111 posted

    The browser's file upload control itself cannot be styled, but there are ways to change its appearance, such as by hiding it and using another control that you can style as a proxy for it. There are some hacks listed here: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 13, 2020 6:17 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi njehan01,

    Accroding to your description,as far as I think,the FileUpload Control cann't change it style.You could custome a button and label to replace FileUpload Control.And then you could set css style to change the format.

    Just like this:

    <head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $('#myfile').change(function () {
                $('#Label1').text($(this).val());
            }); 
        })

    </script>
    <style>
        .file input[type="file"] {
            z-index: 999;
            line-height: 0;
            font-size: 50px;
            ;
            opacity: 0;
            filter: alpha(opacity = 0);
            -ms-filter: "alpha(opacity=0)";
            cursor: pointer;
            margin: 0;
            padding: 0;
            left: 0;
        }

        .add-photo-btn {
            ;
            overflow: hidden;
            cursor: pointer;
            text-align: center;
            background-color: #83b81a;
            color: #fff;
            display: block;
            width: 120px;
            height: 26px;
            font-size: 18px;
            line-height: 30px;
            float: left;
            margin-left: 20px;
        }
        #Label1 {
            margin-left: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="file">
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <label class="add-photo-btn">
                Select File<span><input type="file" id="myfile" name="myfile" /></span>
            </label>
        </div>

    </form>
</body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 14, 2020 2:19 AM