كيف أتأكد من حجم الملف المرفوع من قِبل المستخدم؟

سعاد · 4 يناير 2016

في تطبيق ويب، أود التأكد من أن حجم الملف المرفوع من قبل المستخدم لا يتعدى قيمة معينة، وذلك لعدم تحميل الملفات الكبيرة.

كيف أتأكد من حجم المِلف المُحمّل من قِبل المستخدم؟

E.Nourddine · 4 يناير 2016

يمكنك التأكد انطلاقا من Javascript:

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // التأكد من حجم الملف
}

هذال مثال تطبيقي:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

 
    // APi التأكد من أن المتصفح يدعم 
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
// byte إظهار حجم الملف بـ
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

خصائص الملف المرفوع : Input FileUpload files Property