File size validation in javascript / jQuery?

Question

I want to check the file(image) size before uploading to server. I'm using an .aspx page. This file upload control is in jquery dialog box. When user click OK button then file size validation should work.

This the Code I've done so far:

<a id="lnkUploadImg" href="#">Upload Image</a>
                                <br />
                                <div id="myUploadImgDialog" title="Image Upload">
                                    <table>
                                        <tr>
                                            <td align="right">
                                                Image:
                                            </td>
                                            <td>
                                                <input type="file" name="file" value="" id="imgUpload" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                Description:
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtUploadImgDescription" runat="server" TextMode="MultiLine" Width="285"
                                                    Height="80"></asp:TextBox>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

And Scripting as below:

<script type="text/javascript">
    $(function () {
        $("#myUploadImgDialog").dialog({
            autoOpen: false,
            width: 475,
            modal: true,
            buttons: {
                "OK": function () {
                    if (navigator.appName == "Netscape") {
                        // Validation Code Here
                        // If valid return true else return false
                    }
                    if (navigator.appName == "Microsoft Internet Explorer") {
                        // Validation Code Here
                        // If valid return true else return false
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#lnkUploadImg").click(function () {
            $("#myUploadImgDialog").dialog("open");
        });
    });
</script>

Please help me. Thanks in advance.

bad idea trying to sniff for browsers...use feature detection instead. How are you uploading? — charlietfl, Nov 18 '13 at 15:26

score 0 · Accepted Answer · answered Nov 18 '13 at 15:55

Use the change event of imgUpload to get the information you need.

<button type="button" onclick="javascript: document.getElementById('imageUpload').click();">Upload</button>

var filesInput = document.getElementById("imgUpload");
filesInput.addEventListener("change", function(event){
    var file = event.target.files[0];
    console.log(file.size);
});

File size validation in javascript / jQuery?

1 Answers1