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

一、表单 1. 控件类型：

文本框，，用于输入文本；
口令框，，用于输入口令；
单选框，，用于选择一项；
复选框，，用于选择多项；
下拉框，，用户不可见，但表单提交时会把隐藏文本发送到服务器。

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

//  Monday
var mon = document.getElementById('monday');
mon.value; // '1'
mon.checked; // true或者false

2. HTML5新增控件

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

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

3. 表单提交

1️⃣ 通过

元素的submit()方法

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

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

浏览器默认点击

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

二、文件

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

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

1. 校验文件扩展名

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:fakepathtest.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}

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 + '
' +
                     '大小: ' + file.size + '
' +
                     '修改: ' + 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);
});

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

3. 回调

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

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

Java相关栏目本月热门文章

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