HTML表单与文件

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    当前行车速度：<meter value="159" min="0" max="220" low="0" high="160">120</meter>千米/小时<br/>

    <!--

    属性说明：

        value:当前值 默认0

        min：最小值 默认0

        max：最大值 默认1

        low：指定范围最小值 必须 > min

        high：指定范围最大值 必须 < max

        optimun：有效范围最佳值 如果该值 > high 说明越大越好，< low 说明越小越好

    -->

    任务完成比例：<progress value="30" max="100">30/100</progress><br/>

<script type="text/javascript">

</script>

</body>

</html>

新增元素与属性

form：指明元素归属哪个表单，可以写在form标签的外部，以前所有的表单元素都必须写在form表单内的
formaction：元素所属的action
formmethod：元素提交方式
placeholder：提示输入
autofocus：获取输入焦点
list：与datelist配合生成下拉框

 <input type="text" name="greeting" list="greetings">

     <datalist id="greetings" style="disable:none">

         <option value="1">早上好</option>

         <option value="2">中午好</option>

         <option value="3">晚上好</option>

     </datalist>

新增与改良的input type属性

search：用于站点搜索，样式与text一样，但safari中search与text是不同的
tel：与text类似，但用于电话
url：与text文本框类似，但必须输入满足url格式的文字
email：可以使用multiple属性，传递多个email地址，用逗号分隔
datetime、date、month、week、time、datetime-location
number
range：只允许输入一定范围内数值的文本框，包含min与max属性，默认0~100
color：颜色文本选择框
file：可以通过指定multiple属性，选择多个文件

验证

required：是否必填
pattern：指定正则表达式
min、max：对于数值或日期类型，设置了最值
step：增大或减小时的步幅
formnovalidate：配置在提交按钮上或input上，对应的校验会消失

文件API

FileList对象：表示用户选择的文件列表
file对象：FileList中的每个元素都是file对象

举例：获取多选的文件

    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        function showFileName(){

            var file;

            var upFiles = document.getElementById("file").files;

            var len = upFiles.length;

            for (var i = 0;i < len;i++){

                file = upFiles[i];

                document.write(file.name);

                document.write("<br/>");

            }

        }

    </script>

</head>

<body>

    文件选择:<input type="file" multiple id="file" size="80" /><input type="button" value="文件上传" onclick="showFileName()">

</body>

</html>

1 下拉框

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <form>

        单选

        <select>

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

        </select><tr>

        多选

        <select multiple="multiple">

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>5</option>

            <option>6</option>

            <option>7</option>

            <option>8</option>

            <option>9</option>

            <option>0</option>

        </select><tr>

        optiongroup

        <select multiple="multiple">

            <optgroup label="书籍1">

                <option>1_1</option>

                <option>1_2</option>

                <option>1_3</option>

                <option>1_4</option>

                <option>1_5</option>

                <option>1_6</option>

            </optgroup>

            <optgroup label="书籍2">

                <option>2_1</option>

                <option>2_2</option>

                <option>2_3</option>

                <option>2_4</option>

                <option>2_5</option>

                <option>2_6</option>

            </optgroup>

        </select>

    </tr>

    </form>

<script type="text/javascript">

</script>

</body>

</html>

2 表单属性

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <form>

        <!-- placeholder 属性指定提示内容 -->

        <input type="text" placeholder="提示内容"><br/>

        <!--输入与下拉同时使用-->

        <input type="text" name="book" list="books" /><br/>

        <!--通过指定formaction属性提交给不同的Action，不再需要通过JavaScript修改提交的Action-->

        <input type="submit" formaction="action1">

        <input type="submit" formaction="action2">

    </form>

    <datalist id="books">

        <option>书籍_1</option>

        <option>书籍_2</option>

        <option>书籍_3</option>

        <option>书籍_4</option>

    </datalist>

    <hr/>

    多文件上传

    <input type="file" multiple id="images" accept="image/*" />

    <input type="button" value="显示文件" onclick="showDetails()" />

    <script type="text/javascript">

        var showDetails = function(){

            var imageFile = document.getElementById("images");

            var fileList = imageFile.files;

            for(var i = 0;i < fileList.length;i++){

                var file = fileList[i];

                var div = document.createElement("div");

                div.innerHTML = "第"+(i+1)+"个文件的文件名是："+file.name+"，该文件大小是："+file.size;

                document.body.appendChild(div);

            }

        }

    </script>

</body>

</html>

3 读取上传文件内容

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    浏览文件：<input type="file" id="file1" /><br/>

    <div id="result"></div>

    <input type="button" value="读取文本文件" onclick="readText();"><br/>

    <input type="button" value="读取二进制文件" onclick="readBinary();"><br/>

    <input type="button" value="以DataURL方式读取" onclick="readURL();"><br/>

<script type="text/javascript">

    var reader = null;

    if(FileReader){

        reader = new FileReader();

    }else{

        alert("浏览器暂不支持FileReader对象");

    }

    var readText = function(){

        reader.readAsText(document.getElementById("file1").files[0],"gbk");

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

    var readBinary = function(){

        reader.readAsBinaryString(document.getElementById("file1").files[0]);

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

    var readURL = function(){

        reader.readAsDataURL(document.getElementById("file1").files[0]);

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

</script>

</body>

</html>

HTML表单与文件的更多相关文章

js实现无刷新表单提交文件，将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...
Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
[原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
SpringMVC 完美解决PUT请求参数绑定问题(普通表单和文件表单)
一解决方案修改web.xml配置文件将下面配置拷贝进去(在原有的web-app节点里面配置其它配置不变)  <filt ...
formidable处理提交的表单或文件的简单介绍
一般来说,客户端向服务端提交数据有GET和POST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.url与url模块的配合处理可以快速得到客户 ...
FastAPI 学习之路（十八）表单与文件
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
.net c# 提交包含文件file 的form表单获得文件的Stream流
1.前台html代码要写一个有id的form,可是不能有runat="server"属性.由于一个页面中,有这个属性的form表单仅仅能有一个. 再要有一个有name的ifram ...
php表单提交--文件
创建一个文件上传表单允许用户从表单上传文件是非常有用的. 请看下面这个供上传文件的 HTML 表单: <!doctype html> <html> <head> ...

随机推荐

【mydigitallife.info】如何禁用Aero窗口自动最大化
Go to Control Panel. Click on Ease of Access link or Ease of Access Center icon. Select Change how y ...
实现Hbase的分页
作者:R星月出处:http://www.cnblogs.com/rxingyue 欢迎转载,也请保留这段声明.谢谢! 做一个项目中由于数据量比较大,并且需要定时增量分析,做了hbase的分页.项目中 ...
mac 扫描存活IP段
法一:脚本内容 MacdeMacBook-Pro:~ root# cat ping-ttl.sh #!/bin/bash [ $UID -ne 0 ]&&{ echo "Pl ...
C语言流缓冲 Stream Buffering
From : https://www.gnu.org/software/libc/manual/html_node/Stream-Buffering.html 译者:李秋豪 12.20 流缓冲通常情 ...
CSS 样式、布局、盒子模型
Css内容: 常用样式: 字体颜色背景布局: 浮动定位标签特性标签盒子模型: 边距边框动画: 旋转渐变注意:Css引路径从css文件里找 Html和js ...
（转）国内外优秀的Web前端工程师
1. 国内外优秀的Web前端工程师寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...
开启PHP-LDAP
LDAP简介: LDAP(Lightweight Directory Access Protocol)的意思是"轻量级目录访问协议",是一个用于访问"目录服务器" ...
.pyc是什么鬼
.pyc是个什么鬼? 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存 ...
css3 横向拖拽
css: .tab{ list-style-type: none; display:-webkit-box; display:-webkit-flex; ...
虚拟主机的搭建(ubuntu+apache2)
搭建环境:windows+VMware(Ubuntu)+apache2.(同一IP,不同域名) 1:在VMware的虚拟机Ubuntu下安装apache2(怎么安装百度一下就能找到): 2: apac ...

HTML表单与文件

HTML表单与文件的更多相关文章

随机推荐

热门专题