第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 是指当页面变为最小 ...
随机推荐
- KDTable如何添加合计行？
/** * 功能:添加合计行 * * @param table * 指定的KDTable * @param fields * 需要合计的列 */ public static void apendFoo ...
- day6 RHCE
17.创建一个脚本 在server0上创建一个名为/root/foo.sh的脚本,让其提供下列特性: 当运行/root/foo.sh redhat,输出fedora 当运行/root/foo.sh f ...
- tp框架-------验证码
验证码我们一般很常见,在注册或登录时,都可以用的到,下面我们就来看看它的代码和用法 加验证码是为了防止表单攻击的一种方式,为了我们的程序更加的安全 在tp框架中它自带了一个验证码的类,我们先来看一下 ...
- MySQL数据库之安装,基本操作
一.基础部分 1.数据库是什么 之前所学,数据要永久保留,比如用户注册的用户信息,都是保存于文件,而文件只能存在于某一台机器上. 如果我们不考虑从文件中读取数据的效率问题,并且假设我们的程序所有的组件 ...
- Zigbee系列（概览）
Zigbee技术特点 低速率: 数据传输速率只有20~250kb/s, 2.4GHZ提供250kb/s, 915MHz对应40kb/s, 868Mhz对应20kb/s 低功耗:睡眠模式设备使用电池供电 ...
- php+MySQL的对用户表分表，使用户均匀分布
假如说我们目前已有一亿个注册用户,要把这些用户平均分配到100张表中,并且后续注册的用户也要均匀分配到这100张表 首先当用户注册时,如用户名为“username”,用php的crc32()函数处理用 ...
- sql server 按月对数据表进行分区
当某张数据表数据量较大时,我们就需要对该表进行分区处理,以下sql语句,会将数据表按月份,分为12个分区表存储数据,废话不多说,直接上脚本: use [SIT_L_TMS] --开启 XP_CMDSH ...
- 堆中的路径（MOOC）
将一系列给定数字插入一个初始为空的小顶堆H[].随后对任意给定的下标i,打印从H[i]到根结点的路径. 输入格式: 每组测试第1行包含2个正整数N和M(≤),分别是插入元素的个数.以及需要打印的路径条 ...
- 特征点检测--基于CNN：TILDE: A Temporally Invariant Learned DEtector
TILDE: A Temporally Invariant Learned DEtector Yannick Verdie1,∗ Kwang Moo Yi1,∗ Pascal Fua1 Vincent ...
- Tensorflow - Implement for a Convolutional Neural Network on MNIST.
Coding according to TensorFlow 官方文档中文版 中文注释源于:tf.truncated_normal与tf.random_normal TF-卷积函数 tf.nn.con ...