HTML5文件API

FileList对象和File对象

在HTML5中对file控件添加了multiple属性，允许一次放置多个文件，使用FileList来表示文件列表对象，File对象表示每一个文件。File对象有name、lastModifiedDate、size和type属性。

<form enctype="multipart/form-data" method="post">
    <input name="file" type="file" multiple accept="image/*" id="file">
    <input type="submit" name="button" id="button" onClick="okfile()" value="提交">
</form>

<script type="text/javascript">
	function okfile(){
		var fileList=document.getElementById("file");
		var info=document.getElementById("info");
		var info="文件数："+fileList.files.length;
		for(var i=0;i<fileList.files.length;i++){
			info+="
第"+(i+1)+"个文件："+fileList.files[i].name
			+"
------最后修改日期："+fileList.files[i].lastModifiedDate
			+"
------大小："+fileList.files[i].size
			+"
------类型："+fileList.files[i].type
			+"
";
		}
		alert(info);
	}
</script>

另外，HTML5中对file控件还添加了accept属性，企图让file控件只能接受某种类型的文件，但目前浏览器只局限于文件选择框的操作。 

Blob对象

Blob表示二进制原始数据，据说它提供了一个slice方法，可以通过该方法访问到字节内部的原始数据块，但没见过如何用。事实上File对象也继承了Blob对象。Blob对象有两个属性：size和type，具体示例请参考上文。

FileReader接口

FileReader接口主要用来把文件读入内存，并且读取文件中的数据。FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取，这些都是异步的，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

• readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
• readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
• readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
readAsBinaryString	file
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="button" name="button" id="button" onClick="doit()" value="按钮">
</form>
<script type="text/javascript">
	function doit(){
		var file=document.getElementById("file");
		if(file.files.length!=0){
			var reader=new FileReader();
			reader.readAsText(file.files[0],"GB2312");
			reader.onload=function(f){
				alert(this.result);
			}
		}
		return false;
	}
</script>

拖放API

HTML5中大大简化了拖放的操作，实现拖放只需要两步：

1. 将想要拖放对象元素的属性draggable设置为true(img元素和指定了href的a元素默认允许拖放)；
2. 编写与拖放有段的事件代码；

<p>请把图片或div拖放到矩形中：</p>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid #ccc;500px;height:200px;"></div>
<br />
<img id="dragedimg" src="0.jpg" ondragstart="drag(event)" />
<div id="drageddiv" draggable="true" ondragstart="drag(event)"  style="border:1px solid #F00">被拖放的div</div>
<script type="text/javascript">
function allowDrop(ev){
	ev.preventDefault();
}

function drag(ev){
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>

如上示例，实现拖放的步骤：

1. 分别设置图片(dragedimg)和拖动div(drageddiv)的属性draggable为true；
2. 设置被拖动元素的ondragstart事件，把相关数据存到dataTransfer对象；
3. 关闭目的元素的默认事件preventDefault；
4. 设置目的元素的drop事件(记得关闭默认事件，否则意想不到的效果)，在drop事件中获取dataTransfer的相关数据并做相应处理；

拖放的相关事件

事件	产生事件的元素	描述
dragstart	被拖放的元素。	开始拖放操作。
drag	被拖放的元素。	拖放过程中。
dragenter	拖放过程中鼠标经过的元素。	被拖放的元素开始进入本元素的范围内。
dragover	拖放过程中鼠标经过的元素。	被拖放的元素正在本元素范围内移动。
dragleave	拖放过程中鼠标经过的元素。	被拖放的元素离开本元素的范围。
drop	拖放的目标元素。	有其他元素被拖放到了本元素中。
dragend	拖放的目标元素。	拖放操作结束。

DataTransfer对象的属性与方法

如果DataTransfer对象的属性和方法使用得好，可以实现定制拖放图标，让它只支持特定拖放（例如复制、移动等），甚至可以实现更复杂的拖放操作：

• dropEffect属性：表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。
• effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为：none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。
• type属性：存入数据的种类，字符串的伪数组。
• void clearData(DOMString format)方法：清除DataTransfer对象中存放的数据，如果省略参数，则清除全部数据。
• void setData(DOMString format, DOMString data)方法：向DataTransfer对象内存入数据。
• DOMString getData(DOMString format)方法：从DataTransfer对象中读数据。
• void setDragImage(Element image, long x, long y)方法：用img元素来设置拖放图标（部分浏览器中可以用canvas等其他元素来设置）。

setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：

• 如果effectAllowed属性设定为none，则不允许拖放元素。
• 如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。
• 如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
• 如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

自定义拖放图标
除了上面所说的使用effectAllowed属性与dropEffect属性外，HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中，位于鼠标指针下部的小图标。
DataTransfer对象有一个setDragImage()方法，该方法有三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数为拖放图标离鼠标指针的x轴方向的位移量，第三个参数是拖放图标离鼠标指针的y轴方向的位移量。