Validate ขนาดและประเภทไฟล์ input=file ใน HTML5 ได้ไหม?

ได้ ใช้ JavaScript/jQuery ตรวจสอบก่อน Submit

HTML5 accept attribute 只是 UI Hint ไม่บังคับการ Validate

ตัวอย่าง Validate Size และ Type ด้วย jQuery

<form>
  <input type="file" id="myfile" data-max-size="32154" accept="image/*" />
  <input type="submit"/>
</form>

<script>
$('form').submit(function() {
    var valid = true;
    $('input[type=file][data-max-size]').each(function() {
        if (this.files[0] !== undefined) {
            var maxSize = parseInt($(this).attr('data-max-size'), 10);
            var fileSize = this.files[0].size;
            if (fileSize > maxSize) {
                alert('File too large! Max: ' + maxSize + ' bytes');
                valid = false;
            }
            // ตรวจสอบ Type (optional)
            var allowedTypes = $(this).attr('accept').split(',');
            var fileType = this.files[0].type;
            // ... validate type ...
        }
    });
    return valid;
});
</script>

สำคัญ: ต้อง Validate ฝั่ง Server อีกครั้ง (Client-side บังคับไม่ได้)