Checking file size before upload
I need to check a file that needs to be uploaded to the server. Before you download it, you need to check. those. validation completed on the client side. This task must be done in an ASP.NET MVC3 web page. It should work with all browsers too. IE9,8,7 / FF / chrome. I found out that IE doesn't have the FileReader API.
My question is how to check the file size before uploading on an MVC3 webpage.
source to share
.Net MVC Solution:
I am using data type HttpPostedFileBase
In your folder, Views > Shared
create a new folder named "Templates Editor" and use this:
@model HttpPostedFileBase
@Html.TextBox("", null, new { type = "file" })
Then I pass this object HttpPostedFileBase
from the controller to a method that does the following:
public Files Upload(HttpPostedFileBase files)
{
if (files.ContentLength > 0) {
.....
}
The ContentLength property in the HttpPostedFileBase class contains the number of bytes in the published file
This will make it so that you have access to the file.
In ASP.NET WebForms solution:
<asp:FileUpload ID="fuPictures" runat="server" />
Make a button with an OnClick or OnCommand event that will do something like this:
if (fuPictures.HasFile == true)
{
int fileSize = fuPictures.FileBytes;
}
This will give you the file size. Hope this helps.
source to share
When it comes to a browser that supports HTML 5, it can be easily achieved with simple javascript:
Html syntax
<input type="file" id="myFile" />
Javascript syntax
//gets the element by its id
var myFile = document.getElementById('myFile');
//binds to onchange event of the input field
myFile.addEventListener('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
BUT when it comes to an older browser (and we're all looking at you, Internet Explorer), the only way to do this on the client side is by using ActiveX:
var myFile = document.getElementById('myFile');
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = myfile.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
source to share
You can achieve with jquery:
#<span>
<b>Attachment</b> (8 MB only)<label id="attached" style="color:red; margin-left:5px"></label>
</span>
<input type="file" id="Attachment" name="Attachment" class="admin_textfeildmedium" value="" style="width:551px" accept="image/*">
jQuery(document).ready(function () {
jQuery('#Attachment').bind('change', function () {
//fileUpload = 0;
var iSize = (this.files[0].size / 1024);
if (iSize / 1024 > 1) {
if (((iSize / 1024) / 1024) > 1) {
fileUpload = 0;
} else {
iSize = (Math.round((iSize / 1024) * 100) / 100);
if (iSize <= 8) {
fileUpload = 1;
} else {
fileUpload = 0;
}
}
} else {
fileUpload = 1;
}
if (fileUpload == 0) {
// alert("Your attachment exceeded 8MB.");
jQuery('#attached').html('Your attachment exceeded 8MB.');
jQuery('#Attachment').val('');
}
});
});
source to share