HTML5 multi-file selection and FileList

In HTML5, the file upload has been greatly enhanced. Once upon a time, when we need to implement a multi-file dual-transfer function, multiple <input type = "file> must be specified at a time, if you want to upload 10 files, you must specify 10 lines, because in HTML4, all <input type = "file> files only support the selection of a single file,
 
However, in HTML5, you can add a multiple attribute to <input type = "file">, so that the space can directly support uploading multiple files. If you are not talking about it, submit the Code:
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 enhanced multi-file selection Demo </title>
5. <script type = "text/javascript" src = "js/fileops. js"> </script>
6. 7.
8. <p> select FileList Demo for the multiple file: </p>
9. Select a file:
10. <input type = "file" id = "multifile" multiple size = "80"/>
11. <input type = "button" onclick = "showFileName ()" value = "File Upload"/>
 
When you click a button, the showFileName () method is triggered. All selected files are traversed and their names are printed in sequence:
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. function showFileName (){
8.
9. console. log ("FileList Demo :");
10. var file;
11. // obtain the file set obtained by FileList
12. for (var I = 0; I <document. getElementById ("multifile"). files. length; I ++ ){
13. // The file object is a selected file
14. file = document. getElementById ("multifile"). files [I];
15. // retrieve the file for processing. The file name is only displayed here.
16. console. log (file. name );
17.
18 .}
19 .}
 
Then, when you click the "select file" button, a dialog box will pop up for you to choose. At this time, you can press and hold down the Ctrl key and click the left mouse button to hold the file you want, to select multiple files. Many people cannot figure out why they cannot select multiple files.

 
After the selection, click "open". The <input> input box displays the number of files you have selected:
 

Finally, click the "File Upload" button to trigger the final execution of this JS Code. It uses FileList to traverse all selected files and prints the file names in the browser console in sequence, therefore, the console outputs
 

 
 


From consortium of parallel lines