一、檔案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> ![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)