For IE users you could do it with activeX in a javascript. But that would only make sense if you want to inform the user in advance, whether the file is too large or not.
The final limitation of the file size should be set in your PHP script...
I have the following example to use client side javascript in finding an image file size before uploading...
I've tested in Firefox v1.5 ( ) and Internet Explorer v6 ( ).
Initially I did some searching and couldn't find a good solution overall, however I did find several ideas... putting them together and playing a little I came up with this sample script.
Code:
<html>
<head>
<title>Test Client side file size ~ .: rodboy :.</title>
<script type="text/javascript">
var binary;
var filename;
function upload() {
var oThumbnail = document.getElementById("imgThumbnail");
filename = document.getElementById('myfile').value;
oThumbnail.src = "file:///" + escape(filename).replace(/%5C/gi,'/').replace(/%3A/gi,':');
try {
/*
Note from the developer: rodboy
If mozilla or netscape based browser then the img fileSize property will not work,
therefore using the following will detect the file size.
*/
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
// open the local file
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( filename );
var stream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
stream.init(file, 0x01, 00004, null);
var bstream = Components.classes["@mozilla.org/network/buffered-input-stream;1"].getService();
bstream.QueryInterface(Components.interfaces.nsIBufferedInputStream);
bstream.init(stream, 1000);
bstream.QueryInterface(Components.interfaces.nsIInputStream);
binary = Components.classes["@mozilla.org/binaryinputstream;1"].createInstance(Components.interfaces.nsIBinaryInputStream);
binary.setInputStream (stream);
/*
Note from the developer: rodboy
Display the file size of the image using the binary method.
*/
document.getElementById('sizespan').innerHTML = binary.available();
binary = null;
bstream = null;
stream = null;
file = null;
} catch (e) {
/*
Note from the developer: rodboy
Either browser is IE, in which case the img onload event will take effect, or
we'll not be able to detect the file size using the client side javascript.
*/
}
oThumbnail = null;
}
function getSize(oImg)
{
if (oImg.fileSize >-1) {
document.getElementById('sizespan').innerHTML = oImg.fileSize;
}
}
</script>
</head>
<body>
<form>
File: <input id="myfile" name="datafile" type="file" size="40" onchange="upload();" /><br>
<input id="getsize" name="getsize" type="button" value="Just in case the size hasn't appeared, click here to get the Image Size" onclick="upload();" />
</form>
<div id="sizespan"></div>
<div id="thumbnail">
<img id="imgThumbnail" name="imgThumbnail" src="" alt="place holder" width="50" height="50" onload="getSize(this);"/>
</div>
</body>
</html>
Those commands are only going to work on systems where the browser owner has enabled your ability to perform those tests - that will only be done on company intranets since those security options are turned off for web use.
Even PHP on the server can only test the file size AFTER the file finishes uploading.
All my attempts to upload a file using Javascript have failed. Even the simplest approach: <input type=file...> fails in javascript when I try to retrieve the file attributes using document.getelementbyid(..).file.files.item(0)
Can you suggest any other way in which I can upload a file to a server? I have PHP running on the server.
Reply With Quote
Example client side javascript - image file size
) and Internet Explorer v6 (
it dosent works in ie 8 and above versons or even in google crome
Bookmarks