How to limit the maximum files chosen when using multiple file input
You could run some jQuery client-side validation to check:
$(function(){
$("input[type='submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length)>2){
alert("You can only upload a maximum of 2 files");
}
});
});
http://jsfiddle.net/Curt/u4NuH/
But remember to check on the server side too as client-side validation can be bypassed quite easily.
limit number of file in file input html5 (js) and multi field inside same page
Maybe this answers your question: https://www.tutorialspoint.com/How-to-limit-maximum-items-on-multiple-input-input-type-file-multiple
Here is a little working snippet generated along those lines. I take the maximum allowed numbers of files from the data-max
attribute of each individual input element.
Edit:
I now trigger the file-count-check by the change
event of each file input (I use "delegated binding", i. e. the listener is attached to the parent <form>
element). Depending on whether the maximum number is exceeded I disable the submit-button.
const btn=document.querySelector('input[type=submit]');document.querySelector('form').addEventListener('change',function(ev){ if(ev.target.type=='file'){ // I collect the inps here to allow for dynamic pages (varying number of inputs): const inps=[...document.querySelectorAll('input[type=file]')]; btn.disabled=inps.some(inp=>{ // check whether the condition has been violated at least once if (inp.files.length>inp.dataset.max){ // show warning for first violation console.log(`You are only allowed to upload a maximum of ${inp.dataset.max} files for ${inp.name}!`); return true; } }) }});
<html> <head> <title>HTML file upload</title> </head> <body> <form> <input type="file" name="files1[]" accept=".pdf" multiple data-max="2"><br/> <input type="file" name="files2[]" accept=".pdf" multiple data-max="3"><br/><br/> Upload multiple files, and click Submit.<br> <input type="submit" value = "submit"> </form> </body></html>
Count and limit the number of files uploaded (HTML file input)
You can implement a javascript solution to check the number of files that have been selected, which you can then use to forbid uploading to the server. There are really only going to be client-side solutions to this problem though, as there is really nothing stopping a user from posting these files to your php script anyway. You can specify a maximum upload size limit, but it isn't specific to the number of files that are being uploaded.
Your best bet is to implement some javascript checking, specifying a reasonable maximum upload size for your http server (or in PHP), and then ignoring any file uploaded if it exceeds your maximum count.
Read about the HTML5 File API here to restrict the count of selected files: http://dev.w3.org/2006/webapi/FileAPI/
Here is the php.ini docs which explain how to make a size limitation on uploads: http://php.net/manual/en/ini.core.php
As was suggested in the comments, check out: http://php.net/manual/en/ini.core.php#ini.max-file-uploads
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.
HTML5: What is the max number of files that can be selected on input type =file /
It looks like the spec doesn't define a finite number of files you can select at once. Some implementations may have some maximum, but I wasn't able to easily find one in the source code of Chromium.
Of course, you may still be restricted by other factors, including the server's maximum payload size, and the time that it would take to upload the files on whichever network connection your users have.
Also, note that you can just use multiple
as an attribute, without multiple=""
.
Related Topics
Manipulate a Url String by Adding Get Parameters
How to Send 500 Internal Server Error Error from a PHP Script
HTML Upload Max_File_Size Does Not Appear to Work
PHP Cli: How to Read a Single Character of Input from the Tty (Without Waiting for the Enter Key)
Understanding MVC: Whats the Concept of "Fat" on Models, "Skinny" on Controllers
How to Convert a String to JSON Object in PHP
Guzzle: Handle 400 Bad Request
Switching Between Http and Https Pages with Secure Session-Cookie
Is It Recommended to Store PHP Sessions in Memcache
How to Build Unlimited Level of Menu Through PHP and MySQL
Request Headers Bag Is Missing Authorization Header in Symfony 2
How to Convert Word Smart Quotes and Em Dashes in a String
How to Create Installer for Website. PHP MySQL
Jquery Using Ajax to Send Data and Save in PHP
How to Decode Eval( Gzinflate( Base64_Decode(