第90天：HTML5中文件API和拖放操作
一、文件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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录