首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

仿QQ灵便拖拉文件上传

2014-04-25 
仿QQ灵活拖拉文件上传在html5中,出现了众多的新的技术和特性,而本文将介绍的是目前HTML5标准中,对如何将用

仿QQ灵活拖拉文件上传

在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";

}

}

热点排行