We have a form element that allows the user to “scoop” files in bulk, rather than clicking on one. It is implied that the files are immediately sent to the server as soon as they are selected (because I don’t see much point in forming a list, and then submit again)

<input type="file" multiple="multiple" name="files[]" />

However, if we want to restrict a user, for example, with a portion of 10 files (say, not to overload the server, or if, say, we have a policy of 10 files on one site in one hand), here we are in for a slight disappointment. Or great.

In HTML5, this feature is not implemented (or I do not know about it). We can specify the minimum number of files (that is, one minimum), but the maximum alas.

Get the number of files is not difficult. But then what to do with it?

 var collect = document.getElementById('input').files; //или var collect = $("input").files; // вернет объект FileList : { 0, 1, 2, length: 3, item }

Options:

  • give a message to the user that he has exceeded the chunk limit and interrupt the download;
  • download a valid portion and give a message that only part of the files have been downloaded;
  • create a residue "for later";
  • create a common list, prompting the user to form a batch;

In addition to these torments, we have a purely technical question: how to cut the files array?

The splice() method is not understood. delete collect.item(i) или delete collect[i] has no effect on it, it does not want to turn into null . I also failed to create one more input (or series) and "download" the limited number of files into it.

That is, there is only one option: to rudely interrupt the download, forcing the user to reassemble the collection.

  • one
    From the point of view of usability, you should not give to choose more than 10 files. If the user has selected more, do not give to press the send button. Throwing files by number is a bad idea. The user will think that everyone has gone. And if he guesses that not everyone has been sent, it will be much harder for him to guess what he sent and what not. "For later" you do not fill in the type = "file" field yourself, for it will be necessary to select files again, in any case, again. - Yura Ivanov
  • Solidarity. Actually, I consider this scenario as the main one. >> "For later" you do not fill out the type = "file" field yourself, >> for nonsecurely, I guess that this is true, but I’m not completely sure. IMHO, deleting part of the files from an array is quite secure: I don’t add anything there and don’t use them at all - only filtering by some signs. - Pioneer
  • Here is a similar question with a great answer: Limit on the number of downloaded files - Kobets Matviy

3 answers 3

Look at the jQuery File Upload , there this problem is somehow solved. True, there is a terrible extensibility (for example, I had to rewrite half of the code just to “make friends” with the requirements of the project) - but studying their implementation will definitely not hurt.

    Just make every time a file is added in a form, a new input appears, say up to 10 times so it will appear, after that an alert ('Maximum number of files 10') is issued, if the same is multiple, also in jquery we check length and more than 10 do e.preventDefault (); with the message that too many files

    • if javascript is disabled, then in the <noscript> tag the maximum number of files is 10 </ noscript> - here we set it up - Prosto zashel
    • you warned them if they choose more to blame - Prosto zashel
    • >> make every time you add a file >> a new input appears in the form. So I say (see the beginning of the question) that in the case when we create an upload piece by piece , we have the opportunity to refuse any file, having full power over the input. : it can be deleted, cloned, put into a distant box, etc. But if we do a multiple choice by adding the multiple parameter to the input, the user can select several files at once , and all of them will be placed in one monolithic reinforced concrete input, which cannot be changed. Discrimination, in a word. - Pioneer
    • @ Pioner - file api will save you, but not multi - browser - zb

    Subscribe to the change event and check the length of the collection. If not satisfied, block form submission.

    Well, either we send the files with ajax - then we can control the number.