Is it possible to validate the size and type of input=file in html5
I could do this (demo):
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<form >
<input type="file" id="f" data-max-size="32154" />
<input type="submit" />
</form>
<script>
$(function(){
$('form').submit(function(){
var isOk = true;
$('input[type=file][data-max-size]').each(function(){
if(typeof this.files[0] !== 'undefined'){
var maxSize = parseInt($(this).attr('max-size'),10),
size = this.files[0].size;
isOk = maxSize > size;
return isOk;
}
});
return isOk;
});
});
</script>
</body>
</html>
Limit file format when using input type= file ?
Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.
But still, the accept attribute of <input type = "file">
can help to provide a filter in the file select dialog box provided by the user's browser/OS. For example,
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />
Limit the size of a file upload (html input element)
This is completely possible. Use Javascript.
I use jQuery to select the input element. I have it set up with an onChange
event.
$("#aFile_upload").on("change", function (e) {
var count=1;
var files = e.currentTarget.files; // puts all files into an array
// call them as such; files[0].size will get you the file size of the 0th file
for (var x in files) {
var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB
if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) {
if (count > 1) {
approvedHTML += ", "+files[x].name;
}
else {
approvedHTML += files[x].name;
}
count++;
}
}
$("#approvedFiles").val(approvedHTML);
});
The code above saves all the file names that I deem worthy of persisting to the submission page before the submission actually happens. I add the "approved" files to an input element's val using jQuery so a form submit will send the names of the files I want to save. All the files will be submitted, however, now on the server-side, we do have to filter these out. I haven't written any code for that yet but use your imagination. I assume one can accomplish this by a for loop and matching the names sent over from the input field and matching them to the $_FILES
(PHP Superglobal, sorry I don't know ruby file variable) variable.
My point is you can do checks for files before submission. I do this and then output it to the user before he/she submits the form, to let them know what they are uploading to my site. Anything that doesn't meet the criteria does not get displayed back to the user and therefore they should know, that the files that are too large won't be saved. This should work on all browsers because I'm not using the FormData
object.
Validate file size and type in a multiple input
Change type of submit button to normal button and use onclick
handler for it by giving a id
as upload
,
<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi" >
<div>
<input type="file" name="fUpload1" id="fileUpload1"/>
<input type="file" name="fUpload2" id="fileUpload2"/>
<input type="file" name="fUpload3" id="fileUpload3"/>
</div>
<div>
<input type="button" id="upload" value="upload" />
</div>
</form>
and your click event handler should be,
$(document).ready(function(){
$('#upload').click(function(){
alert('hello');
$('input[type="file"]').each(function(){
var thisFile = $(this);
var fileSize = thisFile[0].files[0].size;
alert(fileSize);
});
$('form#dataPribadi').submit();
});
});
UPDATED FIDDLE
How to allow input type= file to accept only image files?
Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:
<label>Your Image File
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>
Client Checking file size using HTML5?
This works. Place it inside an event listener for when the input changes.
if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}
How to check file input size with jQuery?
You actually don't have access to filesystem (for example reading and writing local files), however, due to HTML5 File Api specification, there are some file properties that you do have access to, and the file size is one of them.
For the HTML below
<input type="file" id="myFile" />
try the following:
//binds to onchange event of your input field
$('#myFile').bind('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
As it is a part of the HTML5 specification, it will only work for modern browsers (v10 required for IE) and I added here more details and links about other file information you should know: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/
Old browsers support
Be aware that old browsers will return a null
value for the previous this.files
call, so accessing this.files[0]
will raise an exception and you should check for File API support before using it
Related Topics
$Http Doesn't Send Cookie in Requests
Using Z-Index to Get Div Above Another Div
How to Make the HTML5 Number Field Display Trailing Zeroes
How to Notify the HTML Container That the Swf Has Finished, Using Swfobject
How to Create a Hidden Div That Doesn't Create a Line Break or Horizontal Space
How to Change the Color of <Div> Element Depending on Its Height or Width
HTML Video Player Plays Sound But Not Video
How to Make Rooftext Effect and Valley Text Effect in HTML5 (Or Fabric.Js)
Why Is an Element with Position: Fixed Moving with a Non-Positioned Sibling
Export HTML Table to Excel Using ASP.NET
How Is the Margin-Top Percentage Calculated
What Is the Default Button Type
Dynamically Aligning Pseudo Element According to Parent Height
Make <Body> Fill Entire Screen
How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element