Recommended way to check file size on upload_问答_开发者

I am working on a web application which supports file uploading. I am already familiar checking the size in server side, but i wanted to check the file size in a client side.

I know its a browser limitation that we cant access the file properties for security reasons. So i have tried both swfupload and uploadify component. Both are good and serve the needs.

But the limitation is bo开发者_C百科th depends on flash, so if my end user not installed flash then i would end up in a problem. Asking them to install flash is another thing, but its a web portal and the user base is huge. So i don't like the idea of asking them to install flash.

Today i came across file upload functionality in gmail. And tested this in browser(IE) without having flash installed. What i found was interesting. If you upload a big file, they made a postback and immediately returning the message the file size is too large.

How this is possible, how they can find the size of the file without downloading the whole content.? I believe this must be done by reading HTTP header info. am i right?

So this is the exact functionality i wanted to implement. If the flash is installed already, i can use uploadify to check the size otherwise may be i ll implement-the-never-heardof-technique-used-by-google.

can someone recommend me how to do this?

anybody faced the similar problems earlier, what have you done??

Update:

Gmail upload with flash installed in FF

Recommended way to check file size on upload

without flash in IE

Recommended way to check file size on upload

You may take a look at the File API which is a draft for HTML 5. Here's a nice article. That's what Gmail uses if the browser supports it of course. But there's no way to ensure this will work across all browsers.

In IE, you can do it with JS and ActiveX:

function A()
{
  var oas = new ActiveXObject("Scripting.FileSystemObject");
  var d = document.a.b.value;
  var e = oas.getFile(d);
  var f = e.size;
  alert(f + " bytes");
}

</script>
</head>
<body>
<form name="a">
<input type="file" name="b">
<input type="button" name="c" value="SIZE" onClick="A();">
</form>
</body>
</html>

I actually asked this very question (more or less) a few days ago and the general answer seems to be: It can't be done.

For reference: Ensure file size of uploaded file is lower than maxRequestLength before the upload occurs?

I haven't tested this, but isn't there a "Content-Length" header on the request? It will include more than just the file being uploaded, but you can use it as a benchmark to determine if the POST is too large to handle.

  I'll start off by saying that I haven't been able to generate a working copy and most of this is my understanding from reading around and slight expirience. That said, perhaps you could explore it a bit more and/or set me straight if I'm wrong. The main thing points to the idea of the classic form with a hidden input named MAX_FILE_SIZE... In PHP/Apache, the server will stop if the upload is larger than the MAX_FILE_SIZE (see last post from here). On the PHP side of things, the $_FILES array will return an error code (which can be seen here). Take note of UPLOAD_ERR_FORM_SIZE.

   To put this all together, you could have JavaScript upload the file within an IFrame and get the result. If the server spits out an error message (which, in this theory, would be quite quickly), JavaScript can simply alert the user. Otherwise, we can assume the file is now uploaded successfully. Now trying to make sense of Google's code is near impossible; a quick HTML scan is as far as I go and it didn't help any... They do indeed have hidden input fields but none with MAX_FILE_SIZE as the name. They are much shorter and most don't appear to have values. But, I believe this could be possible. Thoughts anyone?

  Who knows, perhaps the great Google Web Server is built in with the power to cut off uploads instantly. Thanks for listening!

I believe file upload is based on RFC 1867, although HTML5 supersedes all this. You can perfectly reimplement this RFC, server side, and check the size of the cumulated incoming stream.

In the most general cases, I don't think you can safely rely on the content-length as it may not represent the size of the file, but just the size of a chunk.

After lot of searching i found we can use maxAllowedContentLength to limit the upload size in ASP.Net applications. Remember this settings work only on IIS 7 or above.

Since this is handled in IIS level, we dont need to handle anything in server code. If the size limit exceeds, it will return the error code 404.13. So you can easily check the code in client side to determine the problem.

This is what i have done to handle the large files if the flash is not installed in the client machine.

Hope this may help someone.

For more info read about this settings, read this

It is possible to determine the size of the file that is on uploading even before the uploaded file has been transfered completely. Even when using Internet Explorer. By using the HTTP's content-length header!
In java world:
First of all the if you handle the request that arrive to the server in the first servlet/filter/controller before any previous thread mass with it, you'll be albe to get the total file size in the content-length header (request.getContentLength()).

second- have a look in an ajax implementation that prove that it is possible: http://www.ajaxfilebrowser.com/

You can have the following Code to get Gmail feature:

<html>
<head>
<script type="text/javascript">
$(function()
{

$('#btnSubmit').click(function()
{
if (typeof (input.files) != 'undefined') {  // this will work in firefox,chrome.
   if (input.files[0].fileSize > MAX_FILE_SIZE) {
        alert("file size exceeded");
         return false;
      }
 }
else
{
//this approach will work for ie 8.
$('iframe').bind('load'),function()
{
try
{
var text = $('iframe')[0].contentWindow.document.body ? $('iframe')[0].contentWindow.document.body.innerHTML : null;
}
catch(e)
{
alert('Server error occurred');
}
}
});
});

});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="fileUpload" action="Default.aspx" target="responseFrame">
<input type="file"/>
<input type="submit" value="upload" id="btnSubmit"/>
</form>
<iframe src='' name='responseFrame' id='responseFrame' style='width:0px;height:0px;border:0;'></iframe>
</body>
</html>

Hope this help.

lol ofc you can do it, it's just a bit of hardwork, if you search for "uploadbar flash" instead of using the data you retrieve to create a uploader you could use it to pass it on or compare or do whatever you want the one i found that seemed quite good is this one, it doesnt necceraly use flash but you could use it to achive the same thing http://www.plupload.com highly configurable p.s. you could force it to just use flash if you really like