HTML5 应用之文件拖拽上传
使用 HTML5 的文件 API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件
上传到服务器。本文将结合实例讲解 HTML5+jQuery+PHP 实现拖拽上传图片的过程,来看下
HTML5 的魅力吧。
HTML
我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview 用来预览
拖拽上传的图片信息。
<div id="drop_area">将图片拖拽到此区域</div> <div id="preview"></div>
Javascript
要想实现拖拽,页面需要阻止浏览器默认行为,即四个事件(拖离、拖后放、拖进、拖
来拖去),因为我们要阻止浏览器默认将图片打开的行为,这里我们使用 jQuery 来完成。
$(function(){
//阻止浏览器默认行。
$(document).on({
dragleave:function(e){
//拖离
e.preventDefault();
},
drop:function(e){
//拖后放
e.preventDefault();
},
dragenter:function(e){
//拖进
e.preventDefault();
},
dragover:function(e){
//拖来拖去
e.preventDefault();
}
接下来我们来了解下文件 API。HTML5 的文件 API 有一个 FileList 接口,它可以通过
e.dataTransfer.files 拖拽事件传递的文件信息,获取本地文件列表信息。
var fileList = e.dataTransfer.files;
使用 files 方法将会获取到拖拽文件的数组形势的数据,每个文件占用一个数组的索
引,如果该索引不存在文件数据,将返回 null 值。可以通过 length 属性获取文件数量.