[php]HTML5文件API

FileList对象和File对象

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

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

Blob对象

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

FileReader接口

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

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

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

<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;width: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的相关数据并做相应处理；

拖放的相关事件

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属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。