第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 2016-2017-2《Java程序设计》课程总结
20155204 2016-2017-2<Java程序设计>课程总结 目录 作业链接汇总 作业总结 实验报告链接汇总 代码托管链接 课堂项目实践 学习经验 问卷调查 链接二维码 (按顺序) ...
- 程序与程序之间共享对象：MarshalByRefObject
源自于:http://stackoverflow.com/questions/439173/message-pumps-and-appdomains/442316 程序与程序之间共享对象: Marsh ...
- [note]左偏树(可并堆)
左偏树(可并堆)https://www.luogu.org/problemnew/show/P3377 题目描述 一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 ...
- 成都Uber优步司机奖励政策（4月10日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- slqite3练习
连接 import sqlite3 con = sqlite3.connect(":memory:") c = con.cursor() # Create table c.exec ...
- Yii 2.0 中事件的使用
关于PHP的事件处理,参照 http://www.cnblogs.com/mafeifan/p/4322238.html http://www.cnblogs.com/mafeifan/p/43222 ...
- javaweb(三十八)——事务
一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句 update from account set mone ...
- [转]操作系统Unix、Windows、Mac OS、Linux的故事
[写得很江湖气,可惜找不到原作者了] 文章转自:http://blog.csdn.net/wenmingchan/article/details/49925379 http://www.jb51.ne ...
- Lua学习笔记（5）: 表
表的初始化方式 表的索引类型一般有两种,一种是通过标识符访问,一种是通过数字访问 --通过标识符访问的表的初始化 table1 = {key_1 = "haha", key_2 = ...
- 【xml_Class、xmlElementNode_Class 类】使用说明
xml_Class.xmlElementNode_Class这两个类是针对XML相关操作的类. 1.xml_Class类是针对XML文档操作的类 目录: 类型 原型 参数 返回 说明 Sub Sub ...