- HTML+CSS网页设计实践教程
- 田中雨
- 2328字
- 2021-03-19 20:43:07
4.1 选择文件
将input元素表示类型的type属性的值设置为file，将会创建一个文件选择框，用户可以单击提供的选择框有关的按钮浏览图片，并且将指定的内容显示到提供的文本框中。
4.1.1 选择单个文件
单个文件选择是最简单的一种方式，它是指用户在浏览器所创建的文件框中选择文件时一次只能选择一个文件。默认情况下，将input元素的type类型指定为file后所创建的文件框，进行选择时就是单个文件的选择。代码如下。
<input type= "file" name="selFile"/>
在文件选择框中所选择的一个文件就是一个File对象，File表示一个独立的文件，该对象中包含多个常用属性，如表4-1所示。
表4-1 File对象的常用属性
【练习1】
在本次练习中，首先向页面中添加文件选择框，然后单击浏览器所提供的与浏览有关的按钮进行选择，选择完成后显示当前选择文件的名称、类型、大小和修改时间，实现步骤如下所示。
（1）创建一个新的网页并进行设计，在页面的合适位置添加文件选择框，并指定name和id属性。代码如下。
选择单个文件：<input type="file" id="selSingleFile" name="SingleFile" />
（2）向页面添加用于显示文件内容的信息，如文件名称、类型、大小和最后修改时间等。代码如下。
<ul>
<li>文件名称：<span id="fName"></span></li>
<li>文件大小：<span id="fSize"></span></li>
<li>文件类型：<span id="fType"></span></li>
<li>上次修改日期：<span id="fDate"></span></li>
</ul>
（3）不同的浏览器所呈现的文件选择框的效果不同，如图4-1和图4-2所示分别为Maxthon和Opera浏览器中的效果。
图4-1 Maxthon浏览器效果
图4-2 Opera浏览器效果
从图4-1和图4-2可以看出，在Maxthon浏览器中所呈现的是一个名称是“选择文件”的按钮和一个基本信息标记；在Opera浏览器中所呈现的内容与其他文本框相似，并且提供了一个名称是“选择…”的按钮。
（4）为文件选择框添加onChange事件属性，该属性调用JavaScript中的脚本函数。代码如下。
选择单个文件：<input type="file" id="selSingleFile" name="SingleFile" onChange="selectedFile()" />
（5）在JavaScript的脚本函数selectedFile()中添加内容代码，分别通过File对象的name、size、type和lastModifiedDate属性获取其他信息。代码如下。
function selectedFile(){
var bookfile=document.getElementById("selSingleFile").files[0];
document.getElementById("fName").innerHTML=bookfile.name;
document.getElementById("fSize").innerHTML=bookfile.size+"字节";
document.getElementById("fType").innerHTML=bookfile.type;
document.getElementById("fDate").innerHTML=bookfile.lastModifiedDate;
}
（6）重新运行页面，单击浏览器中与选择文件有关的按钮（例如Maxthon浏览器中的选择文件）弹出【打开】对话框，在该对话框中选择文件进行测试。如图4-3和图4-4所示分别为Maxthon浏览器和Opera浏览器选择文件后的效果。
图4-3 Maxthon浏览器选择文件效果
图4-4 Opera浏览器选择文件效果
4.1.2 选择多个文件
HTML 5中新增了FileList对象，该对象表示已选择的文件，以数组的形式表示。HTML 5中对文件选择框新增加了multiple属性，通过设置该属性可以允许一次放置多个文件。
在文件选择框中，用户所选择的每一个文件都是一个File对象，而FileList对象则是这些File对象的列表，它代表了所有的用户文件。相关人员获取多个文件的File对象时，可以通过遍历FileList对象中的数据进行获取。
【练习2】
本次练习允许用户选择多个文件，选择文件完成后单击【确认查看】按钮对选择的这些文件获取信息，并且显示到页面中，步骤如下。
（1）添加并且设置新的页面，在页面中添加type属性的值为file的文件选择框，除了设置id和name属性外，还需要指定multiple属性。代码如下。
选择多个文件：<input type="file" id="selMultipleFile" name="MultipleFile" multiple="true" />
（2）继续添加执行查看文件信息操作的按钮，为该按钮添加onClick事件属性，该属性调用JavaScript中的selectedFiles()函数。代码如下。
<input type="button" id="btnGetFiles" name="GetFiles" value="获取信息" onClick="selectedFiles()" />
（3）向页面中添加一个表格元素，使用tbody表示要显示的内容布局。代码如下。
<table width="450" class="prod">
<tr align="left">
<th width="20%">文件名称</th>
<th width="20%">文件大小</th>
<th width="20%">文件类型</th>
<th width="40%">上次修改日期</th>
</tr>
<tbody id="tFiles"></tbody
</table>
（4）在JavaScript中为selectedFiles()函数添加代码，这些代码用于完成文件信息的获取。代码如下。
function selectedFiles(){
var result=document.getElementById("tFiles"); //获取表格中的布局
var mulFiles = document.getElementById("selMultipleFile");
//获取选择的多个文件
for(var i=0;i<mulFiles.files.length;i++) //遍历用户选择的多个文件
{
var aFile=mulFiles.files[i]; //获取单个文件
var str="<tr><td>"+aFile.name+"</td><td>"
+aFile.size+"字节</td><td>"+aFile.type+"</td><td>"
+aFile.lastModifiedDate+"</td></tr>";
result.innerHTML+=str;
}
}
上述代码首先获取表格布局显示的对象和用户选择的多个文件，然后通过files. length属性获取用户选择文件的个数，并且通过for语句进行遍历。在for语句中，通过files属性的索引获取单个文件File对象，然后再通过File对象的属性获取文件信息。
（5）运行页面，在弹出的浏览文件的【打开】对话框中选择文件，按下Ctrl键后再选择文件，从而实现选择多个文件的功能，Maxthon浏览器的效果如图4-5所示。
图4-5 Maxthon浏览器中选择多个文件
（6）选择文件完成后单击对话框中的【打开】按钮，然后再单击【获取信息】按钮获取这些文件的信息，如图4-6和图4-7所示为Maxthon浏览器和Opera浏览器中的效果。
图4-6 Maxthon浏览器中选择多个文件
图4-7 Opera浏览器中选择多个文件
4.1.3 限制选择文件类型
在前面的两个练习中，用户可以选择不同的文件，然后通过type属性获取选择文件的类型。用户选择文件不同，其主要MIME类型也不相同。对于所有的图像文件而言，它们的type属性都是以“image/”开头的，后面紧接着图像的类型，例如image/gif和image/tiff等。
用户在上传个人头像时，通常只允许上传图像类型（以.jpg、.gif或.bmp结尾），其他文件类型（如压缩包、文本文件和文档等）都不允许上传。限制选择的文件类型经常有两种做法：第一种是利用type属性在JavaScript中判断用户选择的文件是否为特定类型；但是这种做法需要编写额外的代码，HTML 5中还可以为file类型添加accept属性来指定要过滤的文件类型。另外，也可以将这两种做法结合起来，指定accept属性后，再在JavaScript脚本中编写代码指定。
【练习3】
判断用户在上传个人头像时，所上传的头像是否是以“.JPEG”格式结尾的，如果是则允许上传，否则不允许上传弹出错误提示。
（1）向新建的页面中添加用户选择个人头像的文件框，并且为该文件框指定accept属性的值为image/jpg，然后添加执行操作的按钮元素。代码如下。
选择个人头像：<input type="file" id="selPersonPic" accept="image/jpg" />
<input type="button" id="btnGetPersonPic" value="确定上传" onClick="exitPersonPic()" />
（2）为执行按钮添加选择文件的判断，判断当前选择的头像是否是JPEG类型的图片，如果不是弹出提示，如果是则显示个人头像信息。代码如下。
function exitPersonPic(){
var bookfile=document.getElementById("selPersonPic").files[0];
if(!/image\/\w+/.test(bookfile.type)){
alert(bookfile.name+"不是图像文件不能上传.");
return;
}
document.getElementById("fName").innerHTML=bookfile.name;
document.getElementById("fSize").innerHTML=bookfile.size+"字节";
document.getElementById("fType").innerHTML=bookfile.type;
document.getElementById("fDate").innerHTML=bookfile.lastModifiedDate;
}
（3）运行页面选择文件后单击【确定上传】按钮进行测试，默认情况下，会自动在弹出的【打开】对话框中添加要过滤的类型，如图4-8所示。
（4）选择文件进行测试，选择图片类型正确时的效果如图4-9所示，选择图片类型错误时的效果如图4-10所示。
试一试
单个文件上传时可以限制单个文件的类型，同样，如果一次性上传多个文件时，可以依次判断这些文件的类型，把不符合类型的图片的错误提示依次弹出。只要在遍历文件时添加判断的代码即可，读者可以亲自动手试一试。
图4-8 限制文件类型
图4-9 选择图片类型正确时
图4-10 选择图片类型错误