The input element in html 5, multi-flood

The input element in HTML 5 has a multiple attribute, with which we can choose to download multiple files. This attribute accepts only one value “multiple”, in live it will look like this:

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

Pay attention to the name , we clearly indicated in it that it is an array.
')
The question immediately arises, which browser doesn’t understand this innovation, the answer is easily predictable, this is the Internet Explorer family. Starting from version 9 and below, they do not support this functionality and will simply ignore the attribute, sincerely I hope that in the final version 10 they will fix it.
In addition, we have given users a lot of files to download at once, we need to take care of them, and give them the opportunity to download exactly the files we need. And here comes another new attribute, accept . Which takes " MIME Media Types ".

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

With such a record, we say that you can upload only pictures, and in the file selection window a filter will work that will show the user only graphic file types. Firefox and Safari ignore accept.

And again we have a problem, the user is trying to submit the form, but he was so busy that he forgot to fill in our input data. We should not give him a reason to be nervous and anxious, and in this situation we will use another new attribute.

The required attribute accepts the string "required", and makes the field mandatory.

 <input type="file" multiple="multiple" name="files[]" accept="image" required="required" title="    " /> 

How it will work, when you try to send a form with an empty input, an error message appears with the following text:

Firefox:

Chrome:

Opera:


To my surprise, Safari showed no warning, and sent an empty form. The above pictures show how it looks in three browsers, in Chrome it doesn’t look very aesthetically pleasing, but only it showed an addition to the error that it took from the title element.

We still have a few problems that need to be solved for the convenience of the user.

• Check file type again
• File sizes
• Number of files

And we have a very simple way to check it all out using favorite JavaScript. The input element with the file type contains an invisible files attribute, when accessing which we get a FilleList object if the input is not empty, otherwise undefined.

 var inputFile = document.getElementById('input').files; //   FileList : { 0, 1, 2, length: 3, item } 

Where 0,1,2 are the keys of the downloaded files.
Length, the number of files.
The item () method accepts a file key.

You can access the file in two ways:

 //   var file = inputFile[0]; //  var file = inputFile.item(0); 

The file variable will contain the file object:

 File : { constructor: File {...}, fileName: 'image.png', //   fileSize: 879394, //   name: 'image.png', //   size: 879394, //   type: 'image/png', // MIME   getAsBinary, getAsDataURL, getAsText, lastModifiedDate: 'Thu May 26 2001 21:34:48 GMT+0300 (Eastern Europe Daylight Time)' } 

Opera does not have the fileSize, FileName properties, but it does have a name and a size. In Chrome, Firefox, Safari there are all four properties.
Only in Chrome is the lastModifiedDate property.

Focus on three methods.

• getAsBinary: get the source code of the file.
• getAsDataURL: get base64 converted data
• getAsText: here I repent, have not yet figured out what it is, and I will be very grateful if you clarify to me.

In my opinion getAsDataURL, a very useful thing, as an example, you can show a preview of files to download without sending data to the server.

And if you validate the form with the help of JavaScript, then based on the above data, any validator can be extended to check the downloadable content in the input element, from file size, weight, quantity, up to validation of pixels in the image.

The resource that helped me to learn and understand the above about the new possibilities of input .