第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 是指当页面变为最小 ...
随机推荐
- 20155210 2016-2017-2 《Java程序设计》第10周学习总结
20155210 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 计算机网络概述 网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输.按照计算 ...
- 20155226 实验四 Android开发基础
20155226第四次实验报告 一.实验内容及步骤 Android Stuidio的安装测试: 安装 Android Stuidio 完成Hello World, 要求修改res目录中的内容,Hell ...
- 20155227 2016-2017-2 《Java程序设计》第一周学习总结
20155227 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 浏览教材,根据自己的理解每章提出一个问题 Java三个平台的区别. JDK.JRE.JVM区 ...
- 20155230 2016-2017-2 《Java程序设计》第四周学习总结
20155230 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 1.使用extends进行扩充继承时private也会被继承但是子类不能在其中直接存取. 2 ...
- WPF中使用WindowChrome自定义窗口中遇到的最大化问题
FrameWork 4.5 之后,内置了WindowChrome类,官方文档: https://msdn.microsoft.com/en-us/library/system.windows.shel ...
- SpringBoot-08：SpringBoot采用json的方式实现前后台通用的配置文件
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 一.需求: 本篇博客是最近笔者做的一个项目,已经上线但是还在不断开发,有些页面上的配置,测试服务器和正式服务器 ...
- Swift入门基础知识
var //代表变量,变量的值可以改变 let//代表常量类型不可改变 //声明常量heh类型Swift会自动根据你的值来自动判断该变量的类型也可以指定类型(个人感觉还是指定类型的比较好,可能会减少系 ...
- 2019年猪年颁奖典礼、公司年会、跨年晚会、科技会议、年终答谢会之幕布背景展板PSD模板-第三部分
16套--2019年猪年颁奖典礼.公司年会.跨年晚会.科技会议.年终答谢会之幕布.背景和展板PSD模板,免费颁奖典礼PSD展板背景幕布,下载地址:百度网盘,https://pan.baidu.com/ ...
- shell loop
#!/bin/sh date i=0 while [ $i -le 30 ] do echi $i /usr/sbin/r2/np_test_acl -f rule.txt i=$(e ...
- Lua学习笔记（7）: 模块
模块 模块就像是c语言工程项目目录里的.h.c文件或外部依赖项,为某一个文件的代码提供依赖,其实就是把工作分成几个模块,方便项目的管理,提高开发效率和维护效率 在Lua中,模块其实就是一个表,实现方式 ...