जवाबों:
हां , W3C की एक नई विशेषता है जो कुछ आधुनिक ब्राउज़र, फ़ाइल एपीआई द्वारा समर्थित है । यह इस उद्देश्य के लिए इस्तेमाल किया जा सकता है, और यह परीक्षण करना आसान है कि क्या यह समर्थित है और यदि यह नहीं है तो किसी अन्य तंत्र पर वापस गिर (यदि आवश्यक हो)।
यहाँ एक पूर्ण उदाहरण है:
<!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>और यहाँ यह कार्रवाई में है। कोशिश करें कि क्रोम या फ़ायरफ़ॉक्स के हालिया संस्करण के साथ।
थोड़ा-सा विषय, लेकिन: ध्यान दें कि क्लाइंट-साइड सत्यापन सर्वर-साइड सत्यापन के लिए कोई विकल्प नहीं है । क्लाइंट-साइड सत्यापन शुद्ध रूप से एक अच्छे उपयोगकर्ता अनुभव प्रदान करना संभव बनाता है। उदाहरण के लिए, यदि आप किसी फ़ाइल को 5MB से अधिक अपलोड करने की अनुमति नहीं देते हैं, तो आप यह जाँचने के लिए क्लाइंट-साइड सत्यापन का उपयोग कर सकते हैं कि उपयोगकर्ता ने जो फ़ाइल चुनी है, वह 5MB से अधिक आकार की नहीं है और यदि है तो उसे एक अच्छा मित्र संदेश दें (इसलिए वे सारा समय केवल सर्वर पर फेंके गए परिणाम को प्राप्त करने के लिए अपलोड करने में खर्च नहीं करते), लेकिन आपको सर्वर पर उस सीमा को भी लागू करना होगा , क्योंकि सभी क्लाइंट-साइड सीमाएँ (और अन्य सत्यापन) को दरकिनार किया जा सकता है।
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 , AJAX के साथ एक अन्य फ़ंक्शन के साथ मिला और मेरी ज़रूरतों के अनुसार बदल गया। यह मेरे html कोड में उस जगह के बारे में एक डॉक्यूमेंट एलिमेंट आईडी प्राप्त करता है, जहाँ मैं फ़ाइल साइज़ लिखना चाहता हूँ।
<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>चियर्स
हालांकि इस सवाल का जवाब है, मैं अपना जवाब पोस्ट करना चाहता था। भविष्य के दर्शकों के लिए काम आ सकता है। आप इसे निम्नलिखित कोड की तरह उपयोग कर सकते हैं।
<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");
}
}इस धागे में प्रदान किया गया JQuery का उदाहरण बहुत पुराना था, और Google मेरे लिए बिल्कुल भी मददगार नहीं था
<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>आप इस लूपअप लोडर को आजमा सकते हैं
यह IE6 (और ऊपर), क्रोम या फ़ायरफ़ॉक्स के तहत ठीक काम करता है
यदि आप I 'दस्तावेज़ मोड' को 'मानक' पर सेट करते हैं, तो आप अपलोड की गई फ़ाइल का आकार प्राप्त करने के लिए सरल जावास्क्रिप्ट 'आकार' विधि का उपयोग कर सकते हैं।
I 'दस्तावेज़ मोड' को 'मानक' पर सेट करें:
<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>इससे मेरा काम बनता है।