How can I get a file's upload size using simple Javascript?

问题

I have upload file functionality on one of the page. I check for the extension of the file using JavaScript. Now i want to restrict the user from uploading file greater than 1 MB. Is there any way i can check the file upload size using JavaScript.

My code currently look like this:

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>

回答1:

Other that aquiring the filename there is no way for you to find out any other details about the file in javascript including its size.

Instead you should configure server-side script to block an oversized upload.

回答2:

See http://www.w3.org/TR/FileAPI/. It is supported by Firefox 3.6; I don't know about any other browsers.

Within the onchange event of a <input id="fileInput" type="file" /> simply:

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

You can also return the contents of the file as a string, and so forth. But again, this may only work with Firefox 3.6.

回答3:

Now it is possible to get file size using pure JavaScript. Nearly all browser support FileReader, which you can use to read file size as well as you can show image without uploading file to server. link

Code:

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

You can get file size directly from file object using following code.

 var fileSize = oFile.size;

回答4:

Most of these answers are way out-of-date. It is currently possible to determine file size client-side in any browser that supports the File API. This includes, pretty much, all browsers other than IE9 and older.

回答5:

It might be possible using a lot of browser-specific code. Take a look at the source of TiddlyWiki, which manages to save itself on the user's hard drive by hooking into Windows Scripting Host (IE), XPCOM (Mozilla), etc.

回答6:

I don't think there is any way of doing that with plain JS from a web page.
With a browser extension maybe, but from a page javascript cannot access the filesystem for security reasons.

Flash and Java should have similar restrictions, but maybe they are a bit less strict.

回答7:

not possible. would be a major security concern to allow client side scripts to run that can read file info from and end users hard drive.

回答8:

See here:

http://www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

As to all the people saying this has to be done server side, they are absolutely spot on it does.

In my case though the maximum size I will except is 128Mb, if a user tries to upload something that is 130Mb they should not have to wait the 5 minute upload time to find out it is too big so I need to do an additional check before they submit the page for usability sake.

来源：https://stackoverflow.com/questions/1606842/how-can-i-get-a-files-upload-size-using-simple-javascript

标签

javascript

upload