JavaScript笔记（浏览器下-操作表单以及文件）

最新推荐文章于 2020-06-11 08:41:44 发布

缩缩北行鸟

最新推荐文章于 2020-06-11 08:41:44 发布

阅读量362

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38801354/article/details/75233504

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1 操作表单

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
HTML表单的输入控件主要有以下几种：

单选按钮
多选按钮
文本框
下拉框（<select>）
口令框
隐藏文本(<input type="hidden">)

1.1 获取值

假如想要获取一个<input>节点的输入值，首先要取得该节点的引用，然后调用value属性就可以了：

/*
<input type="text" id="name" name="name">
*/

var name = document.getElementById("name");
name.value; //用户输入的值

但有点要注意的是，对于多选或单选按钮，其value本身就绑定在HTML上，而我们实际要想拿到的是用户的输入值，也就是用户有没选用这按钮，所以这时除了调用value属性外还需调用checked属性以确定用户的输入选项，checked属性是一个布尔值。

/*
<input type="radio" value="男" name="sex" id="man">
*/
var man = getElementById("sex");
man.value; //男
man.checked;//true or false

1.2 设置值

设置值和获取值类似，对于text、password、hidden以及select，直接设置value属性就可以，对于单选框和复选框，要设置checked。

1.3 提交表单

提交表单的方式基于HTML结构调用哪个事件：

1.3.1 响应`<button>`元素的`onclick`事件

这种方法就是在HTML表单内的按钮元素创建一个onclick事件，使得用户再用鼠标点击时，就马上执行提交表单函数，通过表单节点的submit()方法完成提交。

<script>
    function formSubmit() {
    var form = document.getElementById("test-form");
    form.submit();
}
</script>

<form id="test-form">
    <input tpye="text" name="test">
    <button type="button" onclick="formSubmit()">提交</button>
</form>

这样的做法有个不好的地方就是扰乱了浏览器对form的正常提交，浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

1.3.1 基于`<form>`元素的`onsubmit`事件

<form>元素的onsubmit事件内容是return function()，执行的函数返回布尔值，true的话浏览器继续提交表单，false就停止提交表单。

<script>
    function formSubmit() {
    /*
    这里可以对表单信息检验，作出修改
    */
    return true;
}
</script>

<form id="test-form" onsubmit="return formSubmit()">
    <input tpye="text" name="test">
    <button type="submit">提交</button><!-- type="submit" -->
</form>

这里说一下type=hidden的用处，这是一个隐形表单，用户是看不到的。它有一个用法就是，平常输入口令密码时，都会先将口令转化为MD5才提交表单，那么如果此时的口令框会突然从几个*变成32个*（因为MD5有32个字符），此时就可以使用hidden

<script>
    function formSubmit() {
    //取得口令
    var ipwd=document.getElementById("input-password");
    var md5ipwd=document.getElementById("md5-password");
    //将口令变成MD5后赋值该hidden
    md5ipwd.value=toMD5(ipwd.value);
}
</script>

<form id="test-form" onsubmit="return formSubmit()">
    <input tpye="password" id="input-password">
    <input tpye="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>

注：此处用的最重要两个知识是hidden用户是无法看到的但还是能对它进行编辑并提交，第二个就是<input>没有name属性是不会被提交的。

2 操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

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

用JavaScript对<input type="file">的value赋值是没有任何效果的，此时的value值是文件名，所以JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件。

2.1 File API

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>文件api</title>
        <style>
#test-image-preview {
    width:500px;
    height:500px;
    border:1px solid #ff0000;
}
        </style>
        <script src="fileapi.js"></script>
    </head>
    <body>
        <div id="test-file-info"></div>
        <div id="test-image-preview"></div>
        <form action=""><input id="test-image-file" type="file"></form>
        <script>
    'use strict';
    var fileInput = document.getElementById('file'),
        info = document.getElementById('info'),
        preview = document.getElementById('image-preview');
    // 监听 type="file" 的change事件
    fileInput.addEventListener('change', function () {
        // 清除背景图片
        preview.style.backgroundImage = '';
        // 检查文件是否选择
        if(!fileInput.value) {
            info.innerHTML = '<span style="color:red;">没有选择图片</span>';
            return false;
        }

        // 获取file引用,这里是files[0]
        var file = fileInput.files[0];
        console.log(file);
        info.innerHTML = 
                        '文件: ' + file.name + '<br>'
                    +   '大小: ' + file.size + '<br>'
                    +   '修改: ' + file.lastModifiedDate;

        // 判断图片格式
        if(file.type!=='image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            var p = document.createElement('p');
            p.innerHTML = '<span style="color:red;">不是有效的图片文件！</span>';
            info.appendChild(p);
            return false;
        }

        // 展示图片,创建FileReader对象
        var reader = new FileReader();
        //事先设置一个回调函数
        reader.onload = function (e) {
            var data = e.target.result;// data:image/jpeg;base64,
            preview.style.backgroundImage = 'url("'+data+'")';
        }

        // 以DataURL的形式读取文件
        reader.readAsDataURL(file);
    });

</script>
    </body>
</html>