file API

1. <div class="container">
   
2. <form action="">
   
3. <!-- 对于表单里的input来说：可以直接通过name找到
   
4. document.form[0].input_file
   
5. multiple让文件域可以多选 -->
   
6. <input id="input_file" class="form-control hidden" type="file" name="input_file" multiple>
   
7. <input id="btn_select" class="btn btn-info" type="button" value="选择文件">
   
8. <ul id="file_list" class="list-group">
   
9. </ul>
   
10. </form>
    
11. </div>
    
12. <script>
    
13. (function() {
    
14. var inputFile = document.querySelector('#input_file');
    
15. var fileList = document.querySelector('#file_list');
    
16. var btnSelect = document.querySelector('#btn_select');
    
17. btnSelect.addEventListener('click', function() {
    
18. // 在按钮点击时调用input的点击
    
19. inputFile.click();
    
20. });
    
21. // 选择完成后
    
22. inputFile.addEventListener('change', function() {
    
23. var files = inputFile.files;
    
24. for (var i = 0; i < files.length; i++) {
    
25. var li = document.createElement('li');
    
26. li.setAttribute('class', 'list-group-item');
    
27. // 创建信息的子节点
    
28. li.innerHTML = '<h5 class="list-group-item-heading">'
    
29. + files[i].name + '</h5><p class="list-group-item-text">'
    
30. + files[i].lastModifiedDate.toLocaleDateString() + ' '
    
31. + files[i].lastModifiedDate.toLocaleTimeString() + ' '
    
32. + (files[i].size / 1024).toFixed(2) + 'KB</p>';
    
33. fileList.appendChild(li);
    
34. }
    
35. });
    
36. })();
    
37. </script>

复制代码