{"id":71,"date":"2010-05-10T16:00:12","date_gmt":"2010-05-10T10:30:12","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=71"},"modified":"2010-05-10T16:00:12","modified_gmt":"2010-05-10T10:30:12","slug":"style-file-upload-control-in-asp-html","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/style-file-upload-control-in-asp-html\/","title":{"rendered":"Style File upload control in ASP \/ HTML"},"content":{"rendered":"<p>As most of us know that we cannot style the file upload control to much level, still we can give it a stunning effect with the help of CSS.<\/p>\n<p>There is nothing in code to explain.<\/p>\n<p>I took three upload control and one button to give effect.<\/p>\n<p>Lets say upload control is in ASP.net or in HTML.<\/p>\n<pre>&lt;asp:FileUpload ID=\"FileUpload1\" CssClass=\"Cntrl1\" runat=\"server\" \/&gt;\nOr\nhtml file upload\n&lt;input id=\"readFile\" type=\"file\" runat=\"server\" class=\"Cntrl1\" \/&gt;<\/pre>\n<p>Then create a simple CSS class of name &#8220;Cntrl1&#8221;.<\/p>\n<pre>\u00a0 &lt;style id=\"cssStyle\" type=\"text\/css\" media=\"all\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .Cntrl1\n\u00a0\u00a0\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color:#abcdef;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: Yellow;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: 1px solid #AB00CC;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font: Verdana 10px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 1px 4px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: Palatino Linotype, Arial, Helvetica, sans-serif;\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\n&lt;\/style&gt;<\/pre>\n<p>Out put in different browsers will look like :<\/p>\n<figure id=\"attachment_72\" aria-describedby=\"caption-attachment-72\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-Chrom.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-72\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-Chrom-300x82.png?resize=300%2C82&#038;ssl=1\" alt=\"Output in Chrom\" width=\"300\" height=\"82\" \/><\/a><figcaption id=\"caption-attachment-72\" class=\"wp-caption-text\">Output in Chrom<\/figcaption><\/figure>\n<figure id=\"attachment_73\" aria-describedby=\"caption-attachment-73\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-Mozilla.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-73\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-Mozilla-300x51.png?resize=300%2C51&#038;ssl=1\" alt=\"Output in Mozilla\" width=\"300\" height=\"51\" \/><\/a><figcaption id=\"caption-attachment-73\" class=\"wp-caption-text\">Output in Mozilla<\/figcaption><\/figure>\n<figure id=\"attachment_74\" aria-describedby=\"caption-attachment-74\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-IE.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-74\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-IE-300x48.png?resize=300%2C48&#038;ssl=1\" alt=\"Output in Internet explorer\" width=\"300\" height=\"48\" \/><\/a><figcaption id=\"caption-attachment-74\" class=\"wp-caption-text\">Output in Internet explorer<\/figcaption><\/figure>\n<h1 style=\"text-align: center\"><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Fileupload.html\">View Demo of FileUpload<\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>As most of us know that we cannot style the file upload control to much level, still we can give it a stunning effect with the help of CSS. There is nothing in code to explain. I took three upload control and one button to give effect. Lets say upload control is in ASP.net or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[43,67,100,338],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-web","tag-asp-net","tag-css","tag-fileupload","tag-web"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":132,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/upload-files-in-asp-net-at-production-server\/","url_meta":{"origin":71,"position":0},"title":"Upload Files in ASP.NET at Production server","author":"Jitendra","date":"May 13, 2010","format":false,"excerpt":"In this article, i am going to demonstrate that how to upload the file in ASP.NET production server. Most of the case, a developer created a code to upload the file and test it on his local machine. program runs smoothly, but as he\u00a0forward\u00a0the same code on production. He\u00a0stuck\u00a0in the\u2026","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/WebShare-Folder.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":125,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/cannot-access-a-closed-file-fileupload-in-asp-net\/","url_meta":{"origin":71,"position":1},"title":"cannot access a closed file &#8211; FileUpload in ASP.NET","author":"Jitendra","date":"May 13, 2010","format":false,"excerpt":"This was very\u00a0interesting\u00a0error, i got during development of file upload control in ASP.NET. On my local system, every thing was just fine. but when i deployed my application on development server, my control was able to upload only small size files. whenever i tried to upload large size file i\u2026","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":827,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/add-css-programatically-in-asp-net\/","url_meta":{"origin":71,"position":2},"title":"Add CSS Programatically in ASP.NET","author":"Jitendra","date":"September 3, 2010","format":false,"excerpt":"Tutorial on adding the CSS file dynamically in ASP.NET and C# \/ VB.Net","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2299,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/tutorial-read-and-export-excel-file-in-asp-net-using-c\/","url_meta":{"origin":71,"position":3},"title":"Tutorial &#8211; Read and export excel file in ASP.Net  using C#","author":"Jitendra","date":"July 29, 2011","format":false,"excerpt":"Tutorial - Read and export excel file in ASP.Net using C#","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Read And Export Excel in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/07\/Read-And-Export-Excel-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":71,"position":4},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2380,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/default-submit-button-in-aspx-or-master-page\/","url_meta":{"origin":71,"position":5},"title":"Default Submit button in ASPX or Master Page","author":"Jitendra","date":"August 12, 2011","format":false,"excerpt":"How to handle the default submit button in aspx page having contentplaceholder that is master page","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}