第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 是指当页面变为最小 ...
随机推荐
- 20155220 吴思其 2016-2017《java程序设计》第一周总结
对第一章和第二章的学习 通过了前两章的学习,我了解到了java的由来以及JVM/JRE/JDK三大平台 JDK JDK 是 Java 语言的软件开发工具包. JDK是整个JAVA的核心,包括了Java ...
- 20155305乔磊2016-2017-2《Java程序设计》第一周学习总结
学习考核方式后感 老师对于成绩的获得有很多细节的地方,获得高分很不容易,考核次数也很多,100分分为课堂考核,实验,团队项目,老师对我们的要求可以说非常的严格,我也为有一个要求严格的老师感到幸运荣幸. ...
- 20155316 实验二《Java面向对象程序设计》实验报告
实验1 实验内容 参考 博客 完成单元测试的学习 提交最后三个JUnit测试用例(正常情况,错误情况,边界情况)都通过的截图,截图上要有画图加水印,输入自己的学号 本提交点考查JUnit会不会使用,测 ...
- 【LG3320】[SDOI2015]寻宝游戏
[LG3320][SDOI2015]寻宝游戏 题面 洛谷 题解 不需要建虚树的虚树2333... 贪心地想一下,起始节点肯定是在关键点上,访问顺序就是\(dfs\)序. 那么对于每次询问, \[ An ...
- Nginx入门篇（一）之Nginx介绍
1.简介 Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器. Nginx 是由 Igor Sysoe ...
- PowerDesigner 15学习笔记：十大模型及五大分类
个人认为PowerDesigner 最大的特点和优势就是1)提供了一整套的解决方案,面向了不同的人员提供不同的模型工具,比如有针对企业架构师的模型,有针对需求分析师的模型,有针对系统分析师和软件架构师 ...
- 转发——谷歌云官方：一小时掌握深度学习和 TensorFlow
转发——谷歌云官方:一小时掌握深度学习和 TensorFlow 本文转发自新智元,链接如下: http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==& ...
- Vyatta 网络操作系统
原文发表于:2010-09-19 转载至cu于:2012-07-21 以下是"开源中国社区"写到的: http://www.oschina.net/news/11423/vyatt ...
- [CF1137]Museums Tour
link \(\text{Description:}\) 一个国家有 \(n\) 个城市,\(m\) 条有向道路组成.在这个国家一个星期有 \(d\) 天,每个城市有一个博物馆. 有个旅行团在城市 \ ...
- 亮眼的购物季数据，高涨的 Amazon Prime
依照往年的惯例,亚马逊公布了 2013 购物季的销售数据.据 The Verge 的报道,今年,仅仅网购星期一(Cyber Monday)一天就在全球范围内销售出 3680 万件商品,而去年这一数字为 ...