Some misunderstanding using jQuery files[].size function with and ASP.NET FileUpload control.

Question

I am new to Jquery and ASP.NET so maybe my question will seem naive to some of you.

I need to check file size before upload it to the server.

I have this ASP.NET code:

        <div class="label">
            Select file           
        </div>
        <asp:FileUpload ID="fileAsyncUpload" runat="server" Width="270" />
        <asp:Button ID="Button1" runat="server" Text="Upload" OnClientClick="GetFileSize()" />
    </div>

I have this jquery functions:

function GetFileSize() {
    try {
        var fileSize = 0;
        fileSize = $("#" + '<%= fileAsyncUpload.ClientID %>')[0].files[0].size;
        fileSize = fileSize / 1048576;
        confirm("Upload file size is :" + fileSize + "Mb")

    } catch (e) {
        alert("Error is:" + e);
    }
}

I googled and found the function GetFileSize() above.

But I cant understand this row:

$("#" + '<%= fileAsyncUpload.ClientID %>')[0].files[0].size;

How does it knows file size? Does it load to browser and then check the size of the file? Or it check the size on client computer?

developer.mozilla.org/en/docs/Using_files_from_web_applications check this link also — Frebin Francis
– Frebin Francis, Commented Jan 7, 2016 at 10:17

choz · Accepted Answer · 2016-01-07 10:47:39Z

1

Your GetFileSize function runs in your browser (not on your IIS server). That's a javascript function, which also considered as a client script.

When the users finish selecting the file that they want to upload with <input type=file> element, the browser has performed such as handshake operation which lets the selected file's attributes are readable by the browser. So, it wouldn't be weird if the browser can read the size, would it?

Basically, your ASP.Net markup will render something like this but not exact in HTML,

<div class="label">
    Select file           
    </div>
        <input type='file' id='ctl00$YourParentControlsOrNot$fileSyncUpload' />
        <input type='submit' id='ctl00$YourParentControlsOrNot$Button1' onclick='GetFileSize()' onsubmit='ctl00$blablabla'>Upload</input>
    </div>
</div>

Note: Ignore the element IDs, they're assigned like that if you set your ClientIDMode to AutoID, otherwise It'd look like YourParentControl_Button1 if you set it to Predictable or even just Button1 if you set it to Static.

// This returns your FileUpload control client id, which can be used with javascript.
<%= fileAsyncUpload.ClientID %> 

// This will make it as a javascript element. (Not jQuery),
$("#" + '<%= fileAsyncUpload.ClientID %>')[0] 

// This will return the size of that file.
$("#" + '<%= fileAsyncUpload.ClientID %>')[0].files[0].size

The same case with This sample.

edited Jan 7, 2016 at 10:47

answered Jan 7, 2016 at 10:16

choz

18k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Over a year ago

As you can see I don't use HTML5 <input type=file> I use ASP.NET FileUpload control.Is it works the same?

choz Over a year ago

ASP.NET FileUpload control will render as <input type=file> in HTML. Just right click and inspect your FileUpload control element. I'll add details to my answer.

Collectives™ on Stack Overflow

Some misunderstanding using jQuery files[].size function with and ASP.NET FileUpload control.

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related