HTML5应用开发和 与实践课件第4章文件和 与拖放.ppt

;;; FileList对象表示用户选择的文件列表。在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。File对象有两个属性，name属性表示文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。 【例4-1】 下面是一个使用FileList对象与file对象的实例。在本例中通过单击“浏览”按钮，选择要上传得文件，然后单击“上传文件”按钮，将会弹出一个对话框，在这个对话框中将显示上传文件的名称。本例实现的主要代码如下： !DOCTYPE htmlhead meta charset=UTF-8 titleFileList与file示例/title /head script language=javascript function ShowName() { var file; for(var i=0;idocument.getElementById(file).files.length;i++) { file = document.getElementById(file).files[i];//file对象为用户选择的单个文件 alert(); //弹出文件名 /script 选择文件： input type=file id=file multiple size=50/ input type=button onclick=ShowName(); value=上传文件/ ;本例实现的运行效果如图4-1所示。 图4-1 应用FileList对象与file对象的实例 ; 在上节实例中，对于图像类型的文件，blob对象的type属性都是以“image/”开头的，后面紧跟这图像的类型，利用此特性可以在JavaScript中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。 【例4-3】 下面是对图像类型的判断的实例，在该实例中首先对上传的文件进行判断，如果上传的文件不是图像文件将弹出对话框给出提示，如果是图像文件则显示文件可以上传。本例实现代码如下。 !DOCTYPE htmlhead meta charset=UTF-8 titleBlob对象的type属性利用示例/title script language=javascript function FileUpload() var file; for(var i=0;idocument.getElementById(file).files.length;i++) { file = document.getElementById(file).files[i]; if(!/image\/\w+/.test(file.type)) { alert(+不是图像文件！); break; else alert(+“文件可以上传”); /script 选择文件： input type=file id=file multiple/ input type=button value=文件上传 onclick=FileUpload();/;本例运行效果如图4-3所示。 图4-3 应用blob对象的type属性对上传文件进行判断 ; 另外，HTML5中已经对file控件添加了accept属性，目的就是让file控件只能接受某种类型的文件，但是目前各主流浏览器对其的支持都只限于在打开文件选择窗口时，默认选择图像文件而已，如果选择其他类型文件，file控件也能正常接受。 对file控件使用accept属性的方法如下所示。 input type=file id=file accept=image/* / 图4-4为Firefox浏览器对file控件的accept属性目前的支持情况，其他浏览器也与此类似。 图4-4 Firefox浏览器对file控件的accept属性目前的支持情况 ;4.2 使用FileReader对象读取文件; 检测一个浏览器是否支持 FileReader 很容易做到，支持这一接口的浏览器有一个位于 window 对象下的 FileReader 构造函数，如果浏览器有这个构造函数，那么就