Set Fileupload size through Jquery

Question

I have FileUpload Control on my Page:

 <asp:FileUpload runat="server" ID="fuAttachment" CssClass="fileUploadCSS" size="76" />

I want to change size of this Control on Button's Click event though Jquery.

How do i set it? because ($("#fuAttachment").size doesn't working. and ($("#fuAttachment").width returns null

Thanks in Advace

Have a look http://stackoverflow.com/questions/8443574/how-to-read-maxallowedcontentlength/8444332#8444332 — AnandMohanAwasthi, Jan 13 '12 at 05:56
I think you want to check the size of file, instead of size of control. You need to do it either in the web.config or server side. — AnandMohanAwasthi, Jan 13 '12 at 06:01
@AnandMohanAwasthi the peer is asking about size in browser and not the filesize so it has nothing to do with web.config section — Devjosh, Jan 13 '12 at 06:02

Grrbrr404 · Accepted Answer · 2012-01-13T06:17:49.690

2

Try this for your button onclick method:

$('#fuAttachment').css('width',200);

You can find more information about the jQuery css method here

Update

During my conversation with devjosh i came up with this line of code

$('#fuAttachment').attr('size', 50);

It seems that the size attribute is much more supported in modern browsers than change the css width property.

You cann see a working example here: http://jsfiddle.net/CY3jG/1/ (Tested in IE 8 and FF 9)

edited Jan 13 '12 at 06:17

answered Jan 13 '12 at 05:54

Grrbrr404

1,809
15
17

even i dont know but would wonder if you tell me the reason @Grrbrr404 – Devjosh Jan 13 '12 at 06:00
You forgot to select jQuery on jsfiddle (left side). Check this: http://jsfiddle.net/D2w3f/1/ – Grrbrr404 Jan 13 '12 at 06:01
sorry @Grrbrr but i could not notice the changes in width – Devjosh Jan 13 '12 at 06:05
Than your browser does not support it. Check this in IE and you will see. http://jsfiddle.net/D2w3f/3/ AFAIK chrome and ff does not support it well – Grrbrr404 Jan 13 '12 at 06:08
please enclose the attribute value in single quotes otherwise the solution will not work – Devjosh Jan 13 '12 at 06:16
@Devjosh i updatet my answer. The Size attribute is much more supported for the file element. – Grrbrr404 Jan 13 '12 at 06:19
thats gr8 i tested it now you need +1 – Devjosh Jan 13 '12 at 06:20

score 0 · Answer 2 · answered Jan 13 '12 at 12:26

You have control over various elements of the FileUpload control's style. For design purposes you may want to temporarily add a solid border, it will give you a better perspective to see how the width is actually adjusted. In FireFox and Chrome there is no border around the textbox of the FileUpload control, there is for IE. Without the border it appears that width doesn't change in FF, Chrome. For example, the script below changes font size, background color and the width (which will be clear with a border added).

<script>
      $(document).ready(function() {
      $("#FileUpload1").css('font-size', '25');
      $("#FileUpload1").css('background-color', 'red');
      $("#FileUpload1").css('border', 'solid');
      $("#FileUpload1").css('width', '800');         
          });          
  </script>

Hope this helps.

in jquery it is more common to concatenate multiple methods on the same jq object. E.g.: $("#FileUpload1").css('font-size', '25').css('foo','bar').val('new value').css('morestuff','foo').attr('x','y); — Grrbrr404, Jan 13 '12 at 12:51

Set Fileupload size through Jquery

2 Answers2