如何通过file对象选择文件?

2016-09-09 19:50:00 3480 0 编辑:Monster 来源:程序书籍

FileList对象表示用户选择的文件列表。在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file对象的列表,代表用户选择的所有文件。file对象有两个属性,那么属性表示文件名,不包括路径;lastModifiedDate属性表示文件的最后修改日期。

下面是一个使用FileList对象与file对象的实例。通过点击“浏览”按钮,选择要上传的文件,然后单击“上传文件”按钮,将会弹出一个对话框,在这个对话框中将显示上传文件的名称。

代码如下:

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

<title>FileList与file实例</title>

</head>

<body>

<script language="javascript">

function ShowName()

{

var file;

for(var i=0;i<document.getElementById("file").files.length;i++)

{

file=document.getElementById("file").files[i];

alert(file.name);

}

}

</script>

选择文件:

<input type="file" id="file" multiple size="50"/>

<input type="button" onclick="ShowName();" value="上传文件" />

</body>

</html>

运行代码效果如下图:

file对象选择文件

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通