一、文件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>
