HTML5表单及文件处理

最新推荐文章于 2022-04-20 11:21:24 发布

即将入土的羸弱老年人

最新推荐文章于 2022-04-20 11:21:24 发布

阅读量2k

点赞数 2

分类专栏： Web HTML Note 文章标签： HTML5 表单文件处理

本文链接：https://blog.csdn.net/qq_36823300/article/details/100824611

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

1、HTML4表单

表单是网页中的常用组件，用户可以通过表单向服务器提交数据。表单中可以包括标签（静态文本）、单行文本框、滚动文本框、复选框、单选按钮、下拉菜单（组合框）和按钮等控件。

1）定义表单

可以使用<form>...</form>标签定义表单。

**表单的常用属性及说明**
属性	具体描述
id	表单ID，用来标记一个表单
name	表单名
action	指定处理表单提交数据的脚本文件。脚本文件可以是ASP文件、ASP.net文件和PHP文件，它部署在Web服务器上，用于接收和处理用户通过表单提交的数据。
method	指定表单信息传递到服务器的方式，有效值为GET或POST。如果设置为GET，则当按下提交按钮时，浏览器会立即传送表单数据；如果设置为POST，则浏览器会等待服务器来读取数据。使用GET方法的效率较高，但传递的信息量仅为2KB，而POST方法没有此限制，所以通常使用POST方法。

在action属性中指定处理脚本文件时可以指定文件的路径。可以使用绝对路径和相对路径两种方式指定脚本文件的位置。

绝对路径是指从网站根目录（ \ ）到脚本文件的完整路径，如“\ShowInfo.php”或者“\php\ShowInfo.php”；绝对路径也可以是一个完整的URL，如“http://www.host.com/ShowInfo.php”。

相对路径是从表单所在网页文件到脚本文件的路径。如果网页文件和脚本文件在同一目录下，则action属性中不需要指定路径，也可以使用“.\ShowInfo.php”指定处理脚本文件，“.”表示当前路径。还有一个特殊的相对路径，即“..”，它表示上级路径。如果脚本文件ShowInfo.php在网页文件的上级目录中，则可以使用“..\ShowInfo.php”指定处理脚本文件。

2）文本区域

文本区域是用于输入多行文本的表单控件。可以使用<textarea>标签定义文本区域。例如：

<textarea name="details"></textarea>

<textarea>标签的常用属性如下所示。

**<textarea>标签的常用属性**
属性	具体描述
cols	设置文本区域的宽度
disabled	当此文本区首次加载时禁用此文本区
name	用来标记一个文本区域
readonly	指示用户无法修改文本区内的内容
rows	设置文本区域允许输入的最大行数

3）组合框

组合框也称为列表/菜单，是用于从多个选项中选择某个项目的表单控件。可以使用<select>标签定义组合框。

组合框的常用属性如下所示。

**组合框的常用属性**
属性	具体描述
name	名称，用来标记一个组合框
option	定义组合框中包含的下拉菜单项
value	定义菜单项的值
selected	如果指定某个菜单项的初始状态为“选中”，则在对应的option属性中使用selected

2、HTML5表单的新特性

表单验证

通过表单控件的ValidityState对象验证表单。

可以使用下面的方法获取表单myForm的myInput域的ValidityState对象。

var valCheck = document.myForm.myInput.validity

ValidityState对象的valid属性返回最终验证结果。如果通过验证，则返回true；否则返回false。

ValidityState对象还包含8个约束条件属性，如下所示。这些约束条件属性都是如果通过验证，则返回true；否则返回false。

**ValidityState对象的约束条件属性**
属性	具体描述
valueMissing	针对设置了required的表单元素，检查是否输入了数据
typeMismatch	针对email、number和url类型的表单元素，检查数据是否为指定类型
patternMismatch	针对设置了pattern的表单元素，检查数据是否满足指定模式
tooLong	针对设置了maxLength的表单元素，检查数据是否超长
rangeUnderflow	针对设置了min的range类型的表单元素，检查数据是否超过下限
rangeOverflow	针对设置了max的range类型的表单元素，检查数据是否超过上限
stepMismatch	针对设置了min、max以及step的range类型的表单元素。检查数据是否满足步长约束
customError	处理使用代码明确设置的错误，可以调用setCustomValidity（message）方法将表单控件置于customError状态

3、文件处理

通常可以使用表单提交文件，从而实现上传文件的功能。

1）选择文件的表单控件

使用file类型的input元素可以选择文件。

定义一个表单form1，其中包含一个用于选择文件的控件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input type="file" id="Files" name="files[]" multiple />

<script>
</script>

</body>

</html>

multiple属性用于定义可以选择多个文件。file类型的input元素的界面如下所示。

在JavaScript程序中，可以通过document.getElementsById('控件id')获取选择文件的控件对象。

2）检测浏览器是否支持HTML5 File API

HTML5提供了一组File API，用于对文件进行操作，使程序员可以对选择文件的表单控件进行编程，更好地通过程序控制访问文件和文件上传等功能。在HTML5 File API中定义了一组接口，包括FileList接口、File接口、Blob接口、FileReader接口等。

检查浏览器是否支持HTML5 File API实际上就是检查浏览器对这些接口的支持情况。

使用window.FileList属性可以判断浏览器是否支持FileList接口；
使用window.File属性可以判断浏览器是否支持File接口；
使用window.Blob属性可以判断浏览器是否支持Blob接口；
使用window.FileReader属性可以判断浏览器是否支持FileReader接口。

如果以上属性都为True，则说明浏览器完全支持HTML5 File API，否则说明不支持。

在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持HTML5 File API。

定义按钮的代码如下。

<button id="check" onclick="check();">检测浏览器是否支持HTML5 File API</button>

单击按钮check将调用check()函数。定义check()函数的代码如下所示。

function check() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        alert("您的浏览器完全支持HTML5 File API。");
    }
    else {
        alert("您的浏览器不支持HTML5 File API。");
    }
}

经测试，在主流浏览器中，除Internet Explorer 9 外，Chrome、Firefox 和 Opera 等都完全支持HTML5 File API。

3）FileList接口

FileList接口是File API的重要成员，它代表由本地系统中选中的单个文件组成的数据，用于获取File类型的input元素选择的文件。

定义FileList接口的代码如下。

interface FileList {
    getter File item(unsigned long index);
    readonly attribute unsigned long length;
};

FileList接口的成员说明如下。

item方法：返回FileList数组的第index个数组元素，是一个File对象。
length：数组元素的数量。

FileList接口的数组元素是一个File接口，它表示一个文件对象，其定义代码如下。

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

File接口定义了以下两个属性。

name：返回文件名，不包含路径信息。
lastModifiedDate：返回文件的最后修改日期。

File接口继承自Blob接口，Blob接口表示不变的裸数据，其定义代码如下。

interface Blob {
    readonly attribute unsigned long long size;
    readonly attribute DOMString type;
    // slice Blob into byte-ranged chunks
    Blob slice(optional long long start,
            optional long long end,
            optional DOMString contentType);
    void close();
};

Blob接口定义了以下两个属性。

size：返回Blob对象的大小，单位是字节。
type：返回Blob对象媒体类型的字符串。

Blob接口定义了以下两个方法。

slice：返回从start开始到end结束的contentType类型数据的新的Blob对象。
close：关闭Blob对象。

在JavaScript中，可以使用下面的方法获取File类型的input元素的FileList数组。

document.forms['表单名']['File类型的input元素名'].files

获取FileList数组中的File对象的方法如下。

document.forms['表单名']['File类型的input元素名'].files[index]

或者

document.forms['表单名']['File类型的input元素名'].files.item(index)

演示FileList接口和File接口的使用，显示选择文件的名称和大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input type="file" id="Files" name="files[]" multiple />
    <div id="Lists"></div>

<script>
    
    if (window.File && window.FileList && window.FileReader && window.Blob) {
        document.getElementById('Files').addEventListener('change', fileSelect, false);
    }
    else {
        document.write('您的浏览器不支持File API');
    }

    function fileSelect(e) {
        e = e || window.event;
        var files = e.target.files; // FileList 对象
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size + 'bytes</li>');
        }
        document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

</script>

</body>

</html>

程序从input元素获取FileList对象，然后依次处理其中的File对象，显示File对象的名称、类型和大小。

4）FileReader接口

FileReader接口用于将File对象或Blob对象中的数据读取到内存中。

1、属性

**FileReader接口的属性**
属性	具体描述
readyState	返回当前的状态，可以是下面的值。 EMPTY（0）：FileReader对象已经构建，没有挂起的读操作，即没有调用与读有关的方法 LOADING（1）：正在执行读操作，读的过程中没有发生错误 DONE（2）：整个文件已经被读到内存中，或者读文件过程中发生错误，或者读操作被终止
result	读取的文件或Blob对象的数据
error	DOMError对象，包含错误信息

2、方法

**FileReader接口的方法**
方法	具体描述
readAsArrayBuffer(blob)	异步地将blob数据读取到ArrayBuffer对象中
readAsText(blob,encoding)	以指定的编码格式读取blob数据，读取的result属性是一个字符串
readAsDataURL(blob)	将blob数据读取为编码过的数据URL（即在URL中包含数据）
abort()	终止读取数据

FileReader接口定义了以上3个读取文件的方法。它们的执行步骤相似，只是读取数据的格式不同。

下面以readAsArrayBuffer(blob)方法为例说明。调用readAsArrayBuffer(blob)方法的步骤如下。

（1）如果readyState等于LOADING（即正在执行读操作），则会抛出InvalidStateError异常，并终止操作。

（2）如果blob被关闭，也会抛出InvalidStateError异常，并终止操作。

（3）如果在读取数据时出现错误，则会将readyState属性设置为DONE，并将result属性设置为null。

（4）如果读取数据时没有出现错误，则会将readyState属性设置为LOADING。

（5）触发一个loadstart事件。

（6）返回readAsArrayBuffer()方法，并继续执行下面的步骤。

（7）每50ms或每读取1字节，就触发一个progress事件。

（8）在读取blob数据的过程中，客户端会将数据填充到一个ArrayBuffer对象中，并更新result属性。读取完成后，停止触发progress事件。

（9）当blob数据被全部读取到内存中时，会将readyState属性设置为DONE。

（10）终止readAsArrayBuffer(blob)方法。

调用abort()方法的步骤如下。

（1）如果readyState等于EMPTY或NONE，则会将result属性设置为null，并终止操作。

（2）如果readyState等于LOADING，则会将其设置为NONE，并将result属性设置为null。

（3）如果读取数据的任务队列中还有任务，则将其结束并移除。

（4）终止读取操作。

（5）触发一个abort事件。

（6）触发一个loadend事件。

FileReader接口的3种读取文件方法都有一个blob参数，它可以引用一个File对象、FileList对象或Blob对象。

3、事件

**FileReader接口的事件**
事件	对应的事件处理属性	具体描述
loadstart	onloadstart	开始读数据时触发
progress	onprogress	当读取、编码blob数据时触发。每50ms或每读取1字节，就触发一次
abort	onabort	当调用abort()方法终止读取数据时触发
error	onerror	当读取数据出现错误时触发
load	onload	当读取数据成功完成时触发
loadend	onloadend	当读取数据完成时触发（无论成功或失败）

演示FileReader接口的使用。使用readAsText()读取并显示选择的文本文件的内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input type="file" id="file" />
    <div id="result" name="result"></div>

<script>
    
    if (window.File && window.FileList && window.FileReader && window.Blob) {
        document.getElementById('file').addEventListener('change', fileSelect, false);
    }
    else {
        document.write('您的浏览器不支持File API');
    }

    function fileSelect(e) {
        e = e || window.event;
        var files = e.target.files;
        var f = files[0];
        var reader = new FileReader();  // 创建FileReader对象用于读取文件
        reader.readAsText(f);   // 读取文本数据
        // 读取数据成功后的处理函数
        reader.onload = function(f) {
            document.getElementById('result').innerHTML = this.result;
        }
    }

</script>

</body>

</html>

程序从input元素获取FileList对象，然后处理其中的File对象，创建FileReader对象用于读取文件的文本数据，并显示在div元素result中。

即将入土的羸弱老年人

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5表单及文件处理

1、HTML4表单表单是网页中的常用组件，用户可以通过表单向服务器提交数据。表单中可以包括标签（静态文本）、单行文本框、滚动文本框、复选框、单选按钮、下拉菜单（组合框）和按钮等控件。1）定义表单可以使用<form>...</form>标签定义表单。表单的常用属性及说明属性具体描述 id 表单ID，用来标记一个表单 name ...
复制链接

扫一扫