一、文件API

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

multiple是让文件域可以多选
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文件API</title>

     <link rel="stylesheet" href="bootstrap.css">

 </head>

 <body>

     <form action="">

         <!--对于表单里的input可以直接通过name属性找到它 document.forms[0].input_file   multiple是让文件域可以多选-->

         <input id="input_file" class="form-control hidden" type="file" name="input_file" multiple>

         <input id="btn_select" class="btn btn-info" type="button" value="选择文件">

         <!--<input id="btn_read" class="btn btn-warning" type="button" value="读取文件列表">-->

         <ul id="file_list" class="list-group">

         </ul>

     </form>

     <script>

         (function(){

             var inputFile=document.querySelector('#input_file');

             var btnRead=document.querySelector('#btn_read');

             var fileList=document.querySelector('#file_list');

             var btnSelect=document.querySelector('#btn_select');

             btnSelect.addEventListener('click',function(){

                 //在按钮点击时调用input的点击

                 inputFile.click();

             });

             //点击过后

             /*btnRead.addEventListener('click',function(){

                 var files=inputFile.files;

                 for(var i=0;i<files.length;i++){

                     var li=document.createElement('li');

                     li.setAttribute('class','list-group-item');

                     //创建信息的子节点

                     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>';

                     fileList.appendChild(li);

                 }

             });*/

             //选择完成后 直接显示文件信息

             inputFile.addEventListener('change',function(){

                 var files=inputFile.files;

                 for(var i=0;i<files.length;i++){

                     var li=document.createElement('li');

                     li.setAttribute('class','list-group-item');

                     //创建信息的子节点

                     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>';

                     fileList.appendChild(li);

                 }

             });

         })();

     </script>

 </body>

 </html>

二、拖放操作

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

//如果要捕获drop事件，就一定要在该事件中阻止默认事件

     target.addEventListener('dragover',function(e){

        e.preventDefault();//阻止默认事件

        e.stopPropagation();//阻止冒泡

     });
 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

   <meta charset="UTF-8">

   <title>拖放操作</title>

   <meta name="author" content="汪磊">

   <link rel="stylesheet" href="bootstrap.css">

   <style>

     #target {

       padding: 20px;

       height: 300px;

       border: 5px dashed #c0c0c0;

       color: #e0e0e0;

       font-size: 40px;

       line-height: 260px;

       text-align: center;

       -webkit-user-select: none;

       cursor: pointer;

     }

     #target.actived {

       border-color: #888;

       color: #eaeaea;

       box-shadow: 0 0 80px #e0e0e0 inset;

     }

   </style>

 </head>

 <body>

   <div class="container">

     <div class="page-header">

       <h1>Drag&Drop</h1></div>

     <div class="jumbotron">

       <p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p>

       <img src="toy.png" alt="">

     </div>

       <ul id="result" class="list-group"></ul>

     <div id="target">

       Drag something into here

     </div>

   </div>

   <script>

     (function(){

       //找到目标事件框

       var target=document.querySelector('#target');

       var fileList=document.querySelector('#result');

       //注册拖拽进入

       target.addEventListener('dragenter',function(){

         this.classList.add('actived');//添加类名

       });

       //注册拖拽离开

       target.addEventListener('dragleave',function(){

         this.classList.remove('actived');//添加类名

       });

       //如果要捕获drop事件，就一定要在该事件中阻止默认事件

       target.addEventListener('dragover',function(e){

         e.preventDefault();//阻止默认事件

         e.stopPropagation();//阻止冒泡

       });

       //当元素放到该对象上时

       target.addEventListener('drop',function(e){

         if(e.dataTransfer.files.length){

           var files=e.dataTransfer.files;

           for(var i=0;i<files.length;i++){

             var li=document.createElement('li');

             li.setAttribute('class','list-group-item');

             //创建信息的子节点

             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>';

             fileList.appendChild(li);

           }

         }else {

           //短路运算

           //var data= e.dataTransfer.getData('text/plain')||e.dataTransfer.getData('text/uri-list');

           var uri = e.dataTransfer.getData('text/uri-list');

           var text = e.dataTransfer.getData('text/plain');

           if (uri) {

             var img = document.createElement('img');

             img.setAttribute('src', uri);

             target.appendChild(img);

           } else if (text) {

             var textNode = document.createTextNode(text);

             target.appendChild(textNode);

           }

         }

           this.classList.remove('actived');//添加类名

         e.preventDefault();

         e.stopPropagation();

         console.log(e);

       });

     })();

   </script>

 </body>

 </html>

第90天：HTML5中文件API和拖放操作的更多相关文章

  1. java中文件的I/O操作

    java中文件的读写操作 (一) (1)java中文件的字节转成字符读操作 FileInputStream fStream = new FileInputStream("test.txt&q ...

  2. HTML5之文件API

    问题很简单,做个上传文件的页面. <!-- multiple代表可上传多个文件 --> <input type="file" id="file" ...

  3. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  4. HTML5 进阶系列：拖放 API 实现拖放排序

    前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...

  5. HTML5 进阶系列：拖放 API 实现拖放排序(转载)

    HTML5之拖放API实现拖放排序 前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个 ...

  6. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  7. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  8. HTML5的File API读取文件信息

    html结构: <div id="fileImage"></div> <input type="file" value=" ...

  9. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

随机推荐

  1. 20155235 2006-2007-2 《Java程序设计》第1周学习总结

    20155235 2006-2007-2 <Java程序设计>第1周学习总结 教材学习内容总结 第二章 使用的JRE不同,对JAVA的执行有什么影响 第三章 字符串的用法在JAVA和C中有 ...

  2. 日志采集框架 Flume

    日志采集框架 Flume 1 概述  Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统. Flume可以采集文件,socket数据包等各种形式源数据,又可以将采集到的数据输出到H ...

  3. 深入浅出之-route命令实战使用指南

    本博文的视频讲解已发布:http://oldboy.blog.51cto.com/2561410/1119453 缘起:本文为老男孩linux培训第七次课前考试题及参考答案,有朋友在看完http:// ...

  4. Spark 序列化问题

    在Spark应用开发中,很容易出现如下报错: org.apache.spark.SparkException: Task not serializable at org.apache.spark.ut ...

  5. 【转】查看mysql表结构和表创建语句的方法

    转自:http://blog.csdn.net/business122/article/details/7531291 查看mysql表结构的方法有三种: 1.desc tablename; 例如: ...

  6. C#之Ref,Out以及TryParse()的用法

    ref和out用法很简单,我记下来也提醒自己要用更好的方式去写代码,不要让代码过于臃肿,让人看得头痛.直接写 ref:ref关键字就是让参数进行传递,但是需要初始化,而out不需要初始化参数 ref用 ...

  7. shell 参数

    转:http://hi.baidu.com/ipvsadm/item/489d9e16460195ddbe9042ee linux中shell变量$#,$@,$0,$1,$2的含义解释 linux中s ...

  8. CSP201512-2：消除类游戏

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  9. sqli-labs学习笔记 DAY3

    DAY 3 sqli-labs lesson 6 同lesson 5,只是把单引号改为双引号 sqli-labs lesson 7 同lesson 5,只是把单引号后面加两个空格,使用Burpsuit ...

  10. conda环境管理

    查看环境 conda env list 创建环境 conda create -n python36 python=3.6 进入环境 source activate python36 activate ...