HTML5开发之通过文件对象选择文件

来源：互联网发布：java base64编码编辑：程序博客网时间：2024/06/03 21:19

在HTML中新增了两个与表单相关的API——文件API与拖放API。拖放API可以实现一些有趣的功能，允许用户拖放选项并将其放置到浏览器中的任何地方。其很好地体现了HTML5作为web应用程序规范的思路，使得开发者可以从桌面计算机中借用更多功能。

在HTML5里，从Web网页上访问本地文件系统变得十分简单，那就是使用文件API。这个file规范里提供了一个API来表现Web应用里的文件对象。用户可以编程来选择它们，访问它们的信息。

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

file对象有两个属性，name属性表示文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。

在本例中通过单击“浏览”按钮，选择要上传的文件，然后单击“上传文件”按钮，将会弹出一个对话框，这个对话框将显示上传文件的名称。代码如下：
<!DOCTYPE html><head>
<meta charSet=”UTF一8” >
<title>FileList与file实例<／title>
<／head>
function ShowName()
var file；
／／返回FileList文件列表对象
for (var i=0； i<document．getElementBy工d (” file¨) ．files．1ength；i++)
{
／／file对象为用户选择的单个文件
file=document．getElementBy工d("file”) ．files[i]；
／／弹出文件名
alert(file．name)；
)
}
<／script>
选择文件：
<input type=’’file”id=”file”Size=”50”
<input type=”button”oncliCk=”ShowName
／>

()；”value=”上传

HTML5开发案例关注H5edu教育HTML5开发源码

0 0