16.9 使用拖拽的方式上传图片
在HTML 5页面中，使用DataTransfer对象中的方法，可以实现在浏览器中拖拽移动某个应用文件的效果。虽然在之前的HTML 4以及之前的版本也支持拖放数据的操作，但该操作仅局限在整个浏览器中，并不支持浏览器之外的数据。
在本实例的页面表单中，首先创建一个<ul>元素来接收并预览拖入的图片文件。当用户从电脑的文件夹中选择图片文件后，以拖动的方式将文件放入该元素内，并以预览的方式显示。实例文件9.html的实现代码如下。
然后编写JavaScript文件，使用方法fileUpload_MoveFile（）将拖动的文件数据放入到DataTransfer对象并调取。方法fileUpload_MoveFile（）是在文件js9.js中定义的，此文件的主要代码如下。
本实例首先将图像文件从文件夹拖入页面目标元素，然后通过Data Transfer对象中的方法setData（）保存数据。为了接收被保存的数据，页面中的目标元素在调用元素的拖放事件ondrop中调用了一个自定义的函数dropFile（）。为了确保目标元素顺利接收拖放文件，必须将目标元素的ondragenter与ondragover事件都返回“return false”。
在函数dropFile（）中，先调用另一个自定义的函数fileUpload_MoveFile（），同时，要实现文件的拖放过程，还要在目标元素的拖放事件中，停止其他事件的传播并且关闭默认事件。其实现的过程如JavaScript代码中自定义的函数dropFile（）所示。函数fileUpload_MoveFile（）的运作流程如下：
（1）从DataTransfer对象中获取被保存的文件集合。
（2）遍历整个集合中的文件成员以获取每一个单独的文件。
（3）通过重构一个FileReader对象的方式调用该对象中的readAsDataURL（），将文件以数据地址的形式读入页面中。
（4）同时创建页面元素<span>，将数据地址与<img>元素绑定，通过join（）方法写入<span>元素的内容中。
（5）将全部获取的内容写入ID号为<uIUpload>的列表元素中，通过该元素展示在页面中。其具体的实现过程，跟JavaScript代码中的自定义函数fileUpload_MoveFile（）类似。
执行效果如图16-11所示。
图16-11 执行效果