JavaScript复习笔记 （八）表单&文件

一、表单

1. 控件类型：

• 文本框，<input type="text">，用于输入文本；
• 口令框，<input type="password">，用于输入口令；
• 单选框，<input type="radio">，用于选择一项；
• 复选框，<input type="checkbox">，用于选择多项；
• 下拉框，<select>，用于选择一项；
• 隐藏文本，<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

1. <input>节点，调用value可获得对应的用户输入值
2. 对于text、password、hidden以及select，直接设置value
3. 对于单选框和复选框，value属性返回的是HTML预设的值，对于用户是否“勾上了”选项，用 checked 判断

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
var mon = document.getElementById('monday');
mon.value; // '1'
mon.checked; // true或者false
1
2
3
4

2. HTML5新增控件

常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签

<input type="date" value="2021-12-02">
<input type="datetime-local" value="2021-12-02T20:21:12">
<input type="color" value="#ff0000">
1
2
3

不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。
支持HTML5的浏览器将获得格式化的字符串。

3. 表单提交

1️⃣ 通过<form>元素的submit()方法

function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
1
2
3
4
5
6

这种方式的缺点是扰乱了浏览器对form的正常提交。

浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

2️⃣ 响应<form>本身的onsubmit事件

<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;//如果return false，浏览器将不会继续提交form
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

没有name属性的<input>数据不会被提交。

二、文件

<input type="file">

当一个表单包含<input type="file">时，
表单的enctype必须指定为multipart/form-data，method必须指定为post，
浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户这样来选择本地文件
当用户选择了上传某个文件后，JS也无法获得该文件的真实路径

1. 校验文件扩展名

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}
1
2
3
4
5
6

2. HTML5新增 File API

提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModified;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    var reader = new FileReader();
    //回调函数
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

3. 回调

浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行。
执行多任务是异步调用。
因为是异步，不知道什么时候操作结束，因此需要先设置一个回调函数