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> ...

随机推荐

appuim操作webview控件
1.操作webview控件,在uiautomator中如下图,能定位的只有最外层的内容.就一个webview控件,查找不到里面内容 1.使用driver.getContext(),获取是否是webvi ...
noip模拟赛#24
这套题我只会写第二题...我... T1:给出一个含有向边和无向边的混合图,如何确定无向边的方向使得图中不存在环.保证有解.多解情况输出任意解. =>我往最大流的残量网络的方向去想了...因为混 ...
前端知识体系之CSS及其预处理器SASS/LESS
如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...
SyntaxError: Non-ASCII character ‘\xe5′ in file和在代码中插入中文，python中文注释
SyntaxError: Non-ASCII character '\xe7' in file 出现这种错误的原因是程序中的编码出问题了,只要在程序的最前面加上 #coding: utf-8 重新保存 ...
ifup/ifdown ethX 和 ifconfig ehtX up/down的区别
相同点:[启用]和[禁止]网卡 ifup ethX 和 ifconfig ethX up 用来启用网卡设备 ifdown ethX 和 ifconfig ethX ...
mysql查看版本，编码
SELECT * FROM gps_gpsinfo t WHERE t.reportdate < TO_DATE('2019/4/28 10:05:07', 'yyyy-MM-dd hh24:m ...
记录一下CSS outline-width 属性
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围. outline-width指定轮廓的宽度. 注意: 请始终在outline-width属性之前声明outline-style属性. ...
回数是指从左向右读和从右向左读都是一样的数，例如 12321 ， 909 。请利用 filter() 滤掉非回数
不管在什么地方,什么时候,学习是快速提升自己的能力的一种体现!!!!!!!!!!! 最近一段时间学习了廖雪峰老师学的Python学习资料,给自己的帮助很大,同时也学到的了很多,今天做了一道练习题,对于 ...
tp5 修改自带success或error跳转模板页面
tp5 修改自带success或error跳转模板页面我们在使用tp5或者tp3.2的时候,用的成功或者失败跳转提示页面一般是用框架的.在后续开发过程中,根据实际项目需要,也是可以更改的,在此分享一 ...
HDU 4005 The war 双连通分量缩点
题意: 有一个边带权的无向图,敌人可以任意在图中加一条边,然后你可以选择删除任意一条边使得图不连通,费用为被删除的边的权值. 求敌人在最优的情况下,使图不连通的最小费用. 分析: 首先求出边双连通分量 ...

HTML表单与文件

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

随机推荐

热门专题