第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 是指当页面变为最小 ...
随机推荐
- 20155229 2016-2017-2 《Java程序设计》第二周学习总结
20155229 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 布尔:boolean类型可表示true和false %符号被用来作为控制符号前置,所以规定用 ...
- 最简单的rman操作
连接: [root@oracle000 ‾]# su - oracle [oracle@oracle000 ‾]$ rman target / lines) Recovery Manager: Rel ...
- [并发并行]_[线程模型]_[Pthread线程使用模型之二 工作组work crew]
Pthread线程使用模型之二工作组(Work crew) 场景 1.一些耗时的任务,比如分析多个类型的数据, 是独立的任务, 并不像 pipeline那样有序的依赖关系, 这时候pipeline就显 ...
- NIS - 深入了解如何搭建NIS环境
第一篇[NIS]深入了解NIS 1 环境准备 操作系统:CentOS7.2 服务端安装如下软件: 软件名称 功能 ypserv NIS Server端的服务进程 rpcbind 提供RPC服务 ...
- 一篇文章帮你梳理清楚API设计时需要考虑的几个关键点
本文作者是Enchant的架构师,他最近研究了Netflix.SoundCloud.谷歌.亚马逊.Spotify等公司的微服务实践,并根据自己的理解总结出了一套适用于现代Web和云技术的微服务实战经验 ...
- Ajax在Django中的应用
一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...
- 学习笔记之windows 网络编程
WinSock2.h编程接口笔记在Qtcreater中使用系统默认的库只需要在.pro文件中添加 LIBS += -lws2_32 添加头文件#include <WinSock2.h *初始化套 ...
- [C++]C++得到最大的int值
要得到最大的int值: 利用(unsigned int)-1,这样得到的就是unsigned int表示的最大值, int值只是比unsigned int多一位符号位,所以对(unsigned int ...
- Java实现在线预览功能
java实现在线预览功能,需要用到 jacob.dll jacob.jar 预览pdf所需js pdfobject.min.js 将上传文件转为pdf保存. <div class=&qu ...
- Immutable 常用API简介
本文主要整理了Immutable.js常用API的使用. Immutable 是什么? 关于Immutable的定义,官方文档是这样说的: Immutable data encourages pure ...