一、文件API

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

  1. 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事件时,必须先阻止默认事件。

  1. //如果要捕获drop事件,就一定要在该事件中阻止默认事件
  2. target.addEventListener('dragover',function(e){
  3. e.preventDefault();//阻止默认事件
  4. e.stopPropagation();//阻止冒泡
  5. });
  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>

第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. 20155229 2016-2017-2 《Java程序设计》第二周学习总结

    20155229 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 布尔:boolean类型可表示true和false %符号被用来作为控制符号前置,所以规定用 ...

  2. 最简单的rman操作

    连接: [root@oracle000 ‾]# su - oracle [oracle@oracle000 ‾]$ rman target / lines) Recovery Manager: Rel ...

  3. [并发并行]_[线程模型]_[Pthread线程使用模型之二 工作组work crew]

    Pthread线程使用模型之二工作组(Work crew) 场景 1.一些耗时的任务,比如分析多个类型的数据, 是独立的任务, 并不像 pipeline那样有序的依赖关系, 这时候pipeline就显 ...

  4. NIS - 深入了解如何搭建NIS环境

    第一篇[NIS]深入了解NIS 1     环境准备 操作系统:CentOS7.2 服务端安装如下软件: 软件名称 功能 ypserv NIS Server端的服务进程 rpcbind 提供RPC服务 ...

  5. 一篇文章帮你梳理清楚API设计时需要考虑的几个关键点

    本文作者是Enchant的架构师,他最近研究了Netflix.SoundCloud.谷歌.亚马逊.Spotify等公司的微服务实践,并根据自己的理解总结出了一套适用于现代Web和云技术的微服务实战经验 ...

  6. Ajax在Django中的应用

    一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  7. 学习笔记之windows 网络编程

    WinSock2.h编程接口笔记在Qtcreater中使用系统默认的库只需要在.pro文件中添加 LIBS += -lws2_32 添加头文件#include <WinSock2.h *初始化套 ...

  8. [C++]C++得到最大的int值

    要得到最大的int值: 利用(unsigned int)-1,这样得到的就是unsigned int表示的最大值, int值只是比unsigned int多一位符号位,所以对(unsigned int ...

  9. Java实现在线预览功能

    java实现在线预览功能,需要用到  jacob.dll jacob.jar   预览pdf所需js  pdfobject.min.js 将上传文件转为pdf保存. <div class=&qu ...

  10. Immutable 常用API简介

    本文主要整理了Immutable.js常用API的使用. Immutable 是什么? 关于Immutable的定义,官方文档是这样说的: Immutable data encourages pure ...