（本内容部分节选自《HTML 5从入门到精通》）

选择文件

————————————————————————————————————————————————————————

在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。File对象有两个属性，name属性表示文件名，不包括路

径，lastModifiedDate属性表示文件的最后修改日期。

得到文件信息：

Blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的MIME类型，如果是未知类型，则返回一个空字符串。

文件筛选：

对于图像类型的文件，blob对象的type属性都是以“image/”开头的，后面紧跟这图像的类型，利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。

      
字节长度：
文件类型：
选择图片：

 

读取文件

————————————————————————————————————————————————————————

FileReader 的接口拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及它们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

对浏览器是否支持该接口+使用第三第四个预览图片和文件的使用方法如下：

1   2   3   4 
        5   6   7  47  48  49 
       50 
选择要预览的图片： 51   52  53 
      
 54 
选择要预览的文本文件： 55   56  57 
      
 58  59  60

效果图：

可以通过以下代码来了解其执行的步骤：

1   2 
        3   4   5   46  47 
 48 请选择一个图像文件： 49  50  51 
  52 
      
        53 
        54 
      
 55  56

 

拖放API

————————————————————————————————————————————————————————

      在HTML5中，提供了直接支持拖放操作的API。虽然HTML5之前已经可以使用mousedown,mousemove,mouseup来实现拖放操作，但是只支持在浏览器内部的拖放，而在HTML5中，已经支持在浏览器与其他应用程序之间的数据的互相拖动，同时也大大简化了有关于拖放方面的代码。

额，好像FireFox对它有点反应，我这里不想过多学习，感觉实现功能上一般般。。。不过你拖动它可以在方框里显示，也可以直接搜索

1   2   3 
        4   5  42  43  44 
拖放欢迎语
 45 
       46 
      
        47   请拖放 48 
      
 49 
 50 
      
 51  52

具体来讲，你还可以用一些方法对它美化，不一一介绍，可查。