一、文件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. 2017-2018-1 20155308&20155321&20155330《信息安全技术》实验三——数字证书应用1

    2017-2018-1 20155308&20155321&20155330<信息安全技术>实验三--数字证书应用1 实验目的 了解PKI体系 了解用户进行证书申请和CA颁 ...

  2. RHCSA-EXAM 模拟题目

    参考答案:http://www.cnblogs.com/venicid/category/1088924.html 请首先按找以下要求配置考试系统: * Hostname: server0.examp ...

  3. C#实现仪器的自动化控制

    1.概述 生产测试当中,测试仪器不可或缺,如果是小规模生产,手动测试可以对付:但是要想到达大批量生产的目的,为了简化测试,节约时间,就需要进行自动化测试.出于这样的需求,对仪器的自动化程控就有了需求. ...

  4. iOS 关于在提交了APP等待审核之后，发现小Bug需要再提一个版本的说明

    昨天晚上加班到深夜终于将APP推上去,今天早上过来再测试一遍的时候,发现需要一个小调整.而此时应用的状态是正在等待审核,随手记录一下这种情况下,提交一个新版本的做法,有需要的可以参考一下. 01-进入 ...

  5. k8s zookeeper、kafka部署

    安装zookeeper apiVersion: v1 kind: ConfigMap metadata: name: zookeeper-config namespace: kube-system a ...

  6. 性能测试持续集成（Jenkins+Ant+Jmeter）

    一.环境准备: 1.JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.Jmeter:http://jme ...

  7. AndroidStudio引入AAR依赖

    title: AndroidStudio引入AAR依赖 date: 2016-08-10 00:25:57 tags: [aar] categories: [Tool,Gradle] --- 概述 本 ...

  8. 如何使用HtmlTestRunner让自动化测试报告内容更丰富

    原文出自:http://www.cnblogs.com/tsbc/p/4128150.html 简述 使用selenium webdriver + Python做自动化测试,执行完成后要生成测试报告, ...

  9. java面向对象的有序数组和无序数组的比较

    package aa; class Array{ //定义一个有序数组 private long[] a; //定义数组长度 private int nElems; //构造函数初始化 public ...

  10. Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 03

    此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2286 Scrum master:范洪达 一.小组介绍 组长:王一可 组员 ...