در این مقاله میخواهیم قبل از آپلود فایل حجم فایل انتخاب شده را بررسی کنیم

Html5 اجازه دسترسی به محتوای فایل و جزئیات را با استفاده از jquery  و جاوا اسکریپت را میدهد از اینرو مرورگرهایی که Html5 را پشتیبانی میکنند حجم فایل را به آسانی مشخص میکنند

مشخص کردن حجم فایل با استفاده از JavaScript و Html5:

به صفحه html خود یک فایل آپلود و یک دکمه اضافه کنید سپس برای رویداد onclick دکمه خود یک تابع را فراخوانی میکنیم که درون تابع ابتدا بررسی میکنیم که آیا مرورگر html5 را پشتیبانی می کند یا خیر و در صورت پشتیبانی حجم فایل نشان داده خواهد شد:

<input type="file" id="fileUpload" />
<input type="button" value="Upload" onclick="Upload()" />
<script type="text/javascript">
    function Upload() {
        var fileUpload = document.getElementById("fileUpload");
        if (typeof (fileUpload.files) != "undefined") {
            var size = parseFloat(fileUpload.files[0].size / 1024).toFixed(2);
            alert(size + " KB.");
        } else {
            alert("This browser does not support HTML5.");
        }
    }
</script>

مشخص کردن حجم فایل با استفاده از Jquery و Html5:

همانند بالا از همون html استفاده میشود و زمانی که روی دکمه کلیک میشود رویداد کلیک فراخوانی میشود فقط در صورت استفاده از jquery باید به صفحه خود کتابخانه jquery رفرنس داده شود:

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            if (typeof ($("#fileUpload")[0].files) != "undefined") {
                var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
                alert(size + " KB.");
            } else {
                alert("This browser does not support HTML5.");
            }
        });
    });
</script>

از این روش برای نمایش و اطلاع رسانی حجم فایل انتخاب شده به کاربر استفاده نمود و یا با کمی تغییرات در تابع فوق میتوانید حجم فایل انتخاب شده را کنترل کرده و پیغام مناسب نمایش داده شودحالا میتونید برنامه خود را اجرا کنید و خروجی زیر را مشاهده خواهید کرد: