玩转HTML5应用实战:灵活拖拉文件
在HTML5中,出现了众多的新的技术和特性,而本文将介绍的是目前HTML5标准中,对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解。在HTML5中的标准中,提到了希望能在新一代浏览器中,支持用户直接将客户端桌面的文件拖放到浏览器中,甚至鼓励做更多的工作(比如上传文件)。这篇文章将分如下几个方面进行初步的分析和探讨:
如何将文件拖放到web页面中
在Javascript中分析拖拽文件
在客户端装载和解析文件
使用 XMLHttpRequest2异步上传文件到服务端
上传时显示一个进度条
改进上传文件的表单,甚至支持IE 6,以让在各浏览器中可以兼容运行。
并介绍如何单单只用Javascript实现,不用任何框架。
目前浏览器对文件拖拉的支持
在我们开始讲解前,我们先要说明下,由于HTML5的标准最终版本还没完全发布,各浏览器也不是完全都对所有功能进行支持,所以本文的程序有可能在今后的各浏览器中不能完全运行成功,但至少在本文发表时,会对以下浏览器在如下各方面进行支持。
1) 目前程序能在所有的Firefox和Chrome的浏览器中很好的运行。
2) Opera浏览器能解通过Javascript去解析文件,但不支持文件的拖拉到浏览器中及使用XMLHttpRequest2去上传文件。
3) IE和Safari不支持任何本文提到的API和新特性。
4) Apple不允许在iOS系统中使用HTML表单上传文件。
下面,就让我们开始学习之旅吧。
HTML和CSS
我们先来看下上传文件的表单,代码如下:
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>
<div id="submitbutton">
<button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
<div id="messages">
<p>Status Messages</p>
</div>
可以看到,在这个表单中,放置了一个文件选择框,唯一跟HTML4不同的时,这个框采
用的是HTML5中的一个新增的文件上传框属性multiple,允许选择多个不同的文件。此外,
在id为 filedrag的div中,这个区域是用来将文件拖拉放置的区域,下文中会用到。
接下来会看下CSS,代码如下:
#filedrag
{
display: none;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}
#filedrag.hover
{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
在这段CSS中,设置了当文件拖放到页面的指定区域时的样式,这个样式是当文件被拖动
到指定区域时,才起到作用的,是通过Javascript击发其起作用的,下文会提到。
HTML5中的文件API
在HTML5中,对文件的API有如下几点的新的改进,其标准可以参考
(http://www.w3.org/TR/file-upload/)。
FileList: 表示已选择的文件,以数组的形式表示。
File: 代表一个单独的文件
FileReader: FileReader是一个接口,它允许我们在客户端读取文件的数据,并且可以在Javascript中去使用。
开始动手写Javascript
下面,我们开始动手编写Javascript,首先我们编写一些工具javascript,比如:
// getElementById
function $id(id) {
return document.getElementById(id);
}
//
// 输出信息
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
接者,我们编写init方法,去判断文件API的可用性,代码如下:
// 判断当前浏览器中文件API是否可用
if (window.File && window.FileList && window.FileReader) {
Init();
}
//
// 初始化程序
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// 添加文件选择的事件监听
fileselect.addEventListener("change", FileSelectHandler, false);
// 判断xmlhttprequest 2是否可用
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.style.display = "none";
}
}
转载于:https://blog.51cto.com/wws5201985/736992
玩转HTML5应用实战:灵活拖拉文件相关推荐
- 从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
- HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基 ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- 【真会玩】- SpringCloud Netflix 实战笔记 -【Eureka】
文章目录 友情提醒 前置环境搭建 Eureka 概念初识 服务注册 服务发现 续租 拉取注册表 Cancel 同步时间延时 通讯机制 Eureka服务端搭建 Eureka客户端 Provider搭建 ...
- 玩转HTML5移动页面
(1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和G ...
- html5访问本地资源,HTML5实现一个访问本地文件的实例今
怎么通过 html5 读取本地文件 看你要读取什么 在高深一点的要php html5 打开本地文件夹 我想在chrome浏览器下实现点击 打开文件夹 html5本地存储怎么做,html5本地存储实例详 ...
- 上传图片自动加水印html,html5上传多个文件并添加水印 实例源码
[实例简介] [实例截图] [核心代码] html5上传多个文件并添加水印 body{font-size:12px;} a{text-decoration:none;} a,a:after{-webk ...
- #窗体整人小程序_Excel VBA和文件夹-1.8通过对话框灵活选定文件的小技巧
Excel VBA和文件夹-1.8通过对话框灵活选定文件的小技巧 前景提要 在之前,我们学习了如何通过对话框的形式来打开文件的方法,这种方法的好处就是两个字:灵活,我们不用在代码中强制指定必须在某个文 ...
- Linux运维实战|大文件切割
介绍 日常工作中需要对日志文件进行分析,当日志文件过大时,Linux中使用vim.cat.vim.grep.awk等这些工具对大文件日志进行分析将会成为梦魇,具体表现在: 执行速度缓慢,文件内容需要加 ...
最新文章
- Sublime Text3配置Node.js开发环境
- 普通话计算机考试相关信息,普通话考试常见问题有哪些
- cad 快捷键命令大全
- 在Global中Application_Error事件处理错误信息
- mysql 测试 缓存_mysql 缓存开启及测试
- ArcGIS土地利用重分类(一)简单的reclass by table方法
- 【传感器】HT1621 LCD驱动芯片
- android外汇软件开发,外汇ea回测预装基于Android9.0深度定制的操作系统
- django mysql 时区_Django 中关于时间、时区的用法
- 最优化方法(Optimization methods)中的Modularity
- 高薪背后的“难言之隐”,热门职业最为真实的健康观察报告
- Python批量处理表格有用吗_python批量读入图片、处理并批量输出(可用于深度学习训练集的制作)...
- 赢富博易告诉你成功交易者的基本素质
- 关于TP-Link和水星、迅捷三角关系的传闻~~
- 盛世昊通解析什么是汽车OTA技术,智能汽车新颠覆
- zoj 3864 Quiz for EXO-L(连通块 bfs)
- OpenCV Java入门三 Mat的基本操作
- Jersey框架的使用---使用环境的搭建和基础使用
- Android基础-Facebook Rebound 弹性动画库 源码分析
- 数控加工仿真系统的使用介绍(上)
热门文章
- python画精美图案_Python语言的魅力------完美图案
- freebsd查询php5的版本,FreeBSD下查看各软件版本命令
- Golang——文件创建和写入、OpenFile追加写入、Open读取文件、ReadBytes缓冲区读取、os.Args、flag
- 怎么把桌面计算机放到快速启动栏,怎么把桌面图标放到快速启动栏
- c mysql bulk,MySqlBulkLoader批量上传遇到的问题和解决方法
- 初识Node.js之Node.js与java作为后台服务器的对比
- 计算机网络有哪些技能知识,网络基础知识及操作技能.ppt
- 互联网晚报 | 1月16日 星期日 | 微信新增语音播放暂停功能;小米MIUI“纯净模式”上线;全国首例“刷单案”宣判...
- 新能源汽车简史——电动汽车沉浮录
- 工业互联网解决方案创新应用报告(2020)