উত্তর:
হ্যাঁ , ডাব্লু 3 সি এর একটি নতুন বৈশিষ্ট্য যা কিছু আধুনিক ব্রাউজার, ফাইল এপিআই দ্বারা সমর্থিত । এটি এই উদ্দেশ্যে ব্যবহার করা যেতে পারে এবং এটি সমর্থিত কিনা তা পরীক্ষা করা সহজ এবং যদি তা না হয় তবে অন্য কোনও ব্যবস্থায় ফিরে (যদি প্রয়োজন হয়) পড়ে যান।
এখানে একটি সম্পূর্ণ উদাহরণ:
<!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;
// (Can't use `typeof FileReader === "function"` because apparently
// it comes back as "object" on some browsers. So just see if it's there
// at all.)
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];
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>এবং এখানে এটি কার্যকর হয়। Chrome বা ফায়ারফক্সের সাম্প্রতিক সংস্করণ দিয়ে এটি ব্যবহার করে দেখুন।
সামান্যভাবে বিষয় ছাড়াই , তবে: নোট করুন যে ক্লায়েন্ট-সাইড বৈধকরণটি সার্ভার-সাইডের বৈধতার জন্য বিকল্প নয় । ক্লায়েন্ট সাইডের বৈধতা কোনও নিখুঁত ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করা সম্ভব করার জন্য খাঁটি। উদাহরণস্বরূপ, আপনি যদি 5MB এর বেশি কোনও ফাইল আপলোড করার অনুমতি না দেন তবে ব্যবহারকারীরা যে ফাইলটি বেছে নিয়েছেন তা 5MB আকারের চেয়ে বেশি নয় এবং এটি যদি একটি ভাল বন্ধুত্বপূর্ণ বার্তা দেয় তবে আপনি ক্লায়েন্ট-সাইড বৈধতা ব্যবহার করতে পারেন (তাই তারা সব যে সময় আপলোড ব্যয় না শুধুমাত্র ফলাফলের সার্ভার এ দূরে নিক্ষিপ্ত পেতে), কিন্তু আপনাকে অবশ্যই এছাড়াও , সার্ভার এ সীমা বলবত্ হিসাবে সব ক্লায়েন্ট-সাইড সীমা (এবং অন্যান্য যাচাই) circumvented করা যেতে পারে।
Jquery ব্যবহার:
<form action="upload" enctype="multipart/form-data" method="post">
Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />
<script type="text/javascript">
$('#image-file').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
});
</script>
</form>MiBআপনি যদি বেসে গণনা করেন তবে এটি হওয়া উচিত 1024।
ডায়নামিক এবং স্ট্যাটিক ফাইল এলিমেন্টের জন্য কাজ করে
জাভাস্ক্রিপ্ট কেবল সমাধান
function ValidateSize(file) {
var FileSize = file.files[0].size / 1024 / 1024; // in MB
if (FileSize > 2) {
alert('File size exceeds 2 MB');
// $(file).val(''); //for clearing with Jquery
} else {
}
} <input onchange="ValidateSize(this)" type="file">sizeসম্পত্তিটি ব্যবহার করে কোডটি এখন সঠিক
$(obj).files[0].size/1024/1024; তবে এটিকে পরিবর্তন করেছেনobj.files[0].size/1024/1024;
না হ্যাঁ, নতুন ব্রাউজারগুলিতে ফাইল এপিআই ব্যবহার করা। বিশদ জানতে টিজে এর উত্তর দেখুন।
ভাল হিসাবে আপনি পুরোনো ব্রাউজারে সমর্থন করার জন্য প্রয়োজন হয়, আপনি মত অনেকটা ফ্ল্যাশ বেস আপলোডার ব্যবহার করতে হবে SWFUpload বা Uploadify এই কাজ করতে।
SWFUpload বৈশিষ্ট্য ডেমো দেখায় কিভাবে file_size_limitসেটিং কাজ করে।
নোট করুন যে এর (স্পষ্টতই) ফ্ল্যাশ দরকার, প্লাস এটির কাজ করার পদ্ধতিটি সাধারণ আপলোড ফর্মগুলির থেকে কিছুটা আলাদা।
এটা বেশ সহজ।
var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 mb for bytes.
{
alert("File size must under 2mb!");
return;
}আপনি যদি jQuery বৈধতা ব্যবহার করে থাকেন তবে আপনি এই জাতীয় কিছু লিখতে পারেন:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MB.'
);আমি এরকম কিছু তৈরি করেছি:
$('#image-file').on('change', function() {
var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">আমি একটি প্রধান জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করেছি যা আমি মোজিলা ডেভেলপার নেটওয়ার্ক সাইট https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications এ খুঁজে পেয়েছি এবং এজেএক্সের সাথে অন্য ফাংশনটি সহ আমার প্রয়োজন অনুসারে পরিবর্তন করেছি। এটি আমার এইচটিএমএল কোডে যেখানে ফাইলের আকারটি লিখতে চাই সেখানে স্থান সম্পর্কিত একটি নথি উপাদান আইডি পেয়ে যায়।
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>চিয়ার্স
যদিও প্রশ্নের উত্তর দেওয়া হয়েছে, আমি আমার উত্তর পোস্ট করতে চেয়েছিলাম। ভবিষ্যতের দর্শকদের কাজে আসতে পারে You আপনি নিম্নলিখিত কোডটিতে এটি ব্যবহার করতে পারেন।
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.n"
+"name: " + f.name + "n"
+"type: " + f.type + "n"
+"size: " + f.size + " bytesn"
+ "starts with: " + contents.substr(1, contents.indexOf("n"))
);
if(f.size > 5242880) {
alert('File size Greater then 5MB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}এই থ্রেডে সরবরাহিত জিকুয়ের উদাহরণটি অত্যন্ত পুরানো ছিল এবং গুগল কোনও উপকারী ছিল না তাই এখানে আমার সংশোধন:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>আপনি এই ফাইনআপলোডার চেষ্টা করতে পারেন
এটি আই 6 (এবং উপরে), ক্রোম বা ফায়ারফক্সের অধীনে সূক্ষ্মভাবে কাজ করে
আপনি যদি 'স্ট্যান্ডার্ডস' তে আই 'ডকুমেন্ট মোড' সেট করেন তবে আপনি আপলোড করা ফাইলের আকার পেতে সহজ জাভাস্ক্রিপ্ট 'সাইজ' পদ্ধতিটি ব্যবহার করতে পারেন।
আই 'ডকুমেন্ট মোড' কে 'স্ট্যান্ডার্ড' এ সেট করুন:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">এর চেয়ে বেশি, আপলোড করা ফাইলের আকার পেতে 'আকার' জাভাস্ক্রিপ্ট পদ্ধতিটি ব্যবহার করুন:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>এটা আমার জন্য কাজ করে.