本章向大家讲解一下HTML 5中文件API与拖放API的使用方法。HTML5的文件API，可以在浏览器中直接显示客户端文件的信息或文件中的内容，而通过拖放API，可以直接将位于客户端中的文件拖动到浏览器中，也可以单独拖动页面中的元素或者元素中的内容。
HTML5拖拽文件预览效果图：
在线演示
以前，我们使用file控件，单击上传按钮后选择计算机中的文件。在HTML5中，我们可以先将计算机中的文件直接拖动到浏览器中进行预览，确定文件是我们所需要的，然后单击上传按钮将该文件上传到服务器端。
我们使用Firefox浏览器提供的file对象的gctAsBinary方法与XMLHttpRequest对象的sendAsBinary方法，进行文件上传。由于条件有限，本例中只讲解文件从客户端计算机中拖放到浏览器中进行预览的功能。
并不是所有文件都能够被预览，在此我们只讲解图片文件和文本文件的预览。如果用户拖动的是文本文件，则拖动完毕后文件预览区显示文本文件的内容。
另外，如果我们将比较大的图像文件或文本文件拖放到文件预览区中，会导致图像文件的尺寸或文本文件的显示范围超出文件预览区的尺寸。针对这种情况，为文件预览区所使用的div元素指定resize样式，这样用户可以通过拖动文件预览区的右下角来放大文件预览
区，使其能够完全显示其中的图片或内容。
本例中用到的HTML 5知识点，文件API与拖放API
1．文件API
HTML5提供了一个操作文件的API，通过这个API，使从Web页面上访问本地文件系统的相关处理变得十分简单。文件API中主要使用file对象与FileReader接口。在HTML 5中，file对象代表客户端计算机中的一个文件，该对象具有两个属性，name属性表示文件名（不包括路径）lastModifiedDate属性表示文件的最后修改日期。
在HTML 5中，可以使用FileReader接口把文件读入内存，并且读取文件中数据。 FileReader接口拥有4个方法，其申3个用于读取文件，另一个用于将读取过程中断。
下表中列出了这4个方法以及它们的参数和功能。
需要注意的是：无论读取成功或失败，结果并不会返回读取结果，这一结果存储在result属性中。
leReader接口的方法：
┏━━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━━━━━┓
┃
方法名 ┃
参数 ┃
描述 ┃
┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫
┃readAsBinaryString ┃ file ┃ 将文件读取为二进制码 ┃
┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫
┃ rcadAsTcxt ┃file, [encoding] ┃ 将文件读取为文本 ┃
┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫
┃readAsDataURL ┃ file ┃ 将文件读取为DataURL ┃
┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫
┃ abort ┃ ( none) ┃ 中断读取操作 ┃
┗━━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━━━━━┛
口
readAsBinaryString：这个方法将文件读取为二进制字符串，将该字符串传送到后端，后端可以通过这段字符串存储文件。
口
rcadAsText：此方法有两个参数，其中第二个参数是文本的编码方式，默认值UTF-8。将文件以文本方式读取，读取的结果就是是这个文本。
口
readAsDataURL：此方法将文件读取为一串Data URL字符串。（此方法通常将图像与 HTML等格式的文件以一种特殊格式的URL地址形式直接读入页面）。
除了以上方法之外，FileReader接口还包含用于捕获读取文件时的状态的事件，如下表。
FileReader接口的事件：
┏━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓
┃
事件 ┃
描述 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onabon ┃ 数据读取中断时触发 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onerror ┃ 数据读取出错时触发 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onloadstart ┃ 数据读取开始时触发 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onprogress ┃ 数据读取中 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onload ┃ 数据读取成功完成时触发 ┃
┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ onloadend ┃ 数据读取完成时触发，无论成功或失败 ┃
┗━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━┛
2．拖放API
HTML 5提供了支持拖放操作的API，在HTML 5之前我们已经可以使用mousedown、mousemove和mouseup来实现拖放操作，但是这些事件只支持在浏览器内部的拖放，而HTML 5可以支持浏览器与其他应用程序之间的数据的互相拖动。
HTML5中实现文件拖放的步骤：
1)将要拖放的对象元素的draggable属性设为true(draggable=¨true¨)，这样才能对该元素进行拖放。另外，默认允许拖放img元素与a元素(必须指定href)
2)编写与拖放有关的事件处理代码。拖放相关的事件如下表。
拖放的相关事件：
┏━━━━━━━┳━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓
┃
事件 ┃
产生事件的元素
┃
描述 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ dragstart ┃ 披拖放的元素 ┃ 开始拖放操作 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ drag ┃ 被拖放的元素 ┃ 拖放过程中 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ dragcnter ┃ 拖放过程中鼠标经过的元素 ┃ 被拖放的元素开始进入本元素的范圈内 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ dragover ┃ 拖放过程中鼠标经过的元素 ┃ 被拖放的元素正在本元素范圈内移动 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ dragleave ┃ 拖放过程中鼠标经过的元素 ┃ 被拖放的元素离开本元素的范围 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ drop ┃ 拖放的目标元素 ┃ 有其他元素棱拖放到了本元素中 ┃
┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫
┃ dragend ┃ 拖放的对象元素 ┃ 拖放操作结束 ┃
┗━━━━━━━┻━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━┛
另外，拖放API中还有一个DataTransfer对象，该对象用来保存拖放时所要携带的数据。我们可以使用该对象的files[0]属性来引用被拖动到文件预览区域中的文件。
var file - ev . dataTransfer. files [O];
本文代码下载： html5drag_html5star.html