第90天：HTML5中文件API和拖放操作-CSDN博客

一、文件API

File API：提供客户端本地操作文件的可能

multiple是让文件域可以多选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文件API</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7 </head>
 8 <body>
 9     <form action="">
10         <!--对于表单里的input可以直接通过name属性找到它 document.forms[0].input_file   multiple是让文件域可以多选-->
11         <input id="input_file" class="form-control hidden" type="file" name="input_file" multiple>
12         <input id="btn_select" class="btn btn-info" type="button" value="选择文件">
13         <!--<input id="btn_read" class="btn btn-warning" type="button" value="读取文件列表">-->
14         <ul id="file_list" class="list-group">
15 
16         </ul>
17     </form>
18     <script>
19         (function(){
20             var inputFile=document.querySelector('#input_file');
21             var btnRead=document.querySelector('#btn_read');
22             var fileList=document.querySelector('#file_list');
23             var btnSelect=document.querySelector('#btn_select');
24 
25             btnSelect.addEventListener('click',function(){
26                 //在按钮点击时调用input的点击
27                 inputFile.click();
28             });
29 
30             //点击过后
31             /*btnRead.addEventListener('click',function(){
32                 var files=inputFile.files;
33                 for(var i=0;i<files.length;i++){
34                     var li=document.createElement('li');
35                     li.setAttribute('class','list-group-item');
36                     //创建信息的子节点
37                     li.innerHTML='<h5 class="list-group-item-heading">'+files[i].name+'</h5><p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleDateString()+' '+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'KB</p>';
38                     fileList.appendChild(li);
39                 }
40             });*/
41 
42             //选择完成后 直接显示文件信息
43             inputFile.addEventListener('change',function(){
44                 var files=inputFile.files;
45                 for(var i=0;i<files.length;i++){
46                     var li=document.createElement('li');
47                     li.setAttribute('class','list-group-item');
48                     //创建信息的子节点
49                     li.innerHTML='<h5 class="list-group-item-heading">'+files[i].name+'</h5><p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleDateString()+' '+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'KB</p>';
50                     fileList.appendChild(li);
51                 }
52             });
53         })();
54     </script>
55 </body>
56 </html>

二、拖放操作

在捕获drop事件时，必须先阻止默认事件。

//如果要捕获drop事件，就一定要在该事件中阻止默认事件
     target.addEventListener('dragover',function(e){
        e.preventDefault();//阻止默认事件
        e.stopPropagation();//阻止冒泡
     });

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>拖放操作</title>
 7   <meta name="author" content="汪磊">
 8   <link rel="stylesheet" href="bootstrap.css">
 9   <style>
10     #target {
11       padding: 20px;
12       height: 300px;
13       border: 5px dashed #c0c0c0;
14       color: #e0e0e0;
15       font-size: 40px;
16       line-height: 260px;
17       text-align: center;
18       -webkit-user-select: none;
19       cursor: pointer;
20     }
21     
22     #target.actived {
23       border-color: #888;
24       color: #eaeaea;
25       box-shadow: 0 0 80px #e0e0e0 inset;
26     }
27   </style>
28 </head>
29 
30 <body>
31   <div class="container">
32     <div class="page-header">
33       <h1>Drag&Drop</h1></div>
34     <div class="jumbotron">
35       <p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p>
36       <img src="toy.png" alt="">
37     </div>
38       <ul id="result" class="list-group"></ul>
39     <div id="target">
40       Drag something into here
41     </div>
42   </div>
43   <script>
44     (function(){
45       //找到目标事件框
46       var target=document.querySelector('#target');
47       var fileList=document.querySelector('#result');
48       //注册拖拽进入
49       target.addEventListener('dragenter',function(){
50         this.classList.add('actived');//添加类名
51       });
52       //注册拖拽离开
53       target.addEventListener('dragleave',function(){
54         this.classList.remove('actived');//添加类名
55       });
56       //如果要捕获drop事件，就一定要在该事件中阻止默认事件
57       target.addEventListener('dragover',function(e){
58         e.preventDefault();//阻止默认事件
59         e.stopPropagation();//阻止冒泡
60       });
61 
62       //当元素放到该对象上时
63       target.addEventListener('drop',function(e){
64         if(e.dataTransfer.files.length){
65           var files=e.dataTransfer.files;
66           for(var i=0;i<files.length;i++){
67             var li=document.createElement('li');
68             li.setAttribute('class','list-group-item');
69             //创建信息的子节点
70             li.innerHTML='<h5 class="list-group-item-heading">'+files[i].name+'</h5><p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleDateString()+' '+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'KB</p>';
71             fileList.appendChild(li);
72           }
73         }else {
74 
75           //短路运算
76           //var data= e.dataTransfer.getData('text/plain')||e.dataTransfer.getData('text/uri-list');
77           var uri = e.dataTransfer.getData('text/uri-list');
78           var text = e.dataTransfer.getData('text/plain');
79           if (uri) {
80             var img = document.createElement('img');
81             img.setAttribute('src', uri);
82             target.appendChild(img);
83           } else if (text) {
84             var textNode = document.createTextNode(text);
85             target.appendChild(textNode);
86           }
87         }
88           this.classList.remove('actived');//添加类名
89 
90         e.preventDefault();
91         e.stopPropagation();
92         console.log(e);
93       });
94 
95     })();
96   </script>
97 </body>
98 
99 </html>