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

来源：互联网发布：java 网络爬虫demo 编辑：程序博客网时间：2024/06/18 11:44

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>

阅读全文

0 0