第90天：HTML5中文件API和拖放操作
一、文件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和拖放操作的更多相关文章
- java中文件的I/O操作
java中文件的读写操作 (一) (1)java中文件的字节转成字符读操作 FileInputStream fStream = new FileInputStream("test.txt&q ...
- HTML5之文件API
问题很简单,做个上传文件的页面. <!-- multiple代表可上传多个文件 --> <input type="file" id="file" ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- HTML5 进阶系列：拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...
- HTML5 进阶系列：拖放 API 实现拖放排序(转载)
HTML5之拖放API实现拖放排序 前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个 ...
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
1.标签元素更加语义化 2.内容类型仍然为“text/html” 扩展符仍然为html或者htm. <1>DOCTYPE 声明<!DOCTYPE html>就可 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- HTML5的File API读取文件信息
html结构: <div id="fileImage"></div> <input type="file" value=" ...
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
随机推荐
- 20155204第4次实验《Android程序设计》实验报告
20155204第四次实验报告 一.实验内容及步骤 1.Android Stuidio的安装测试: 安装 Android Stuidio 完成Hello World, 要求修改res目录中的内容,He ...
- 20155216 实验二 Java面向对象程序设计
实验二:Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD. 2.理解并掌握面向对象的三要素:封装.继承.多态. 3.初步掌握UML建模. 4.熟悉S.O.L.I.D原则. 5.了解设计 ...
- 百度地图Map属性和方法
map的L属性:TANGRAM__1 map的F属性:[object Object] map的xa属性:[object HTMLDivElement] map的width属性:1340 map的hei ...
- [agc004D]Teleporter
Description 传送门 Solution 依题意我们可以知道,以2-n为出发点的边和1号节点会构成一课树(不然2-n号节点无法都达到首都). 为了让2-n号节点中,离1号节点的距离<k的 ...
- day 3 模块
1.系统自带模块 xxx.py 文件 就是模块 ### 模块存放位置 In [1]: import os In [2]: os.__file__ Out[2]: '/usr/lib/python3. ...
- 【LG5020】[NOIP2018]货币系统
[LG5020][NOIP2018]货币系统 题面 洛谷 题解 考场上第一眼还不会233 可以发现只要可以被其他的货币通过一些奇奇怪怪的方式表示出来的货币就\(ban\)掉即可 就是个完全背包 我是统 ...
- pandaboard es 制作SD启动卡OMAP4460
1. 本次使用的是chipsee的板子,带屏幕的,先把资料传到Ubuntu的共享目录下 2. 进入共享目录 /mnt/hgfs/ubuntu_share/pandboard_es_linux# 3. ...
- Maven学习(二)-----Maven启用代理访问
Maven启用代理访问 如果你的公司正在建立一个防火墙,并使用HTTP代理服务器来阻止用户直接连接到互联网.如果您使用代理,Maven将无法下载任何依赖. 为了使它工作,你必须声明在 Maven 的配 ...
- OpenCL入门：(三：GPU内存结构和性能优化)
如果我们需要优化kernel程序,我们必须知道一些GPU的底层知识,本文简单介绍一下GPU内存相关和线程调度知识,并且用一个小示例演示如何简单根据内存结构优化. 一.GPU总线寻址和合并内存访问 假设 ...
- Python基础灬高阶函数（lambda,filter,map,reduce,zip）
高阶函数 lambda函数 关键字lambda表示匿名函数,当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. lambda函数省略函数名,冒号前为参数,冒号后函数体. # ...