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

随机推荐

可以使用可用的服务和参数调用在“eWorld.WCFImplement.ServiceImplement.ImageArchiveService”类型上使用“Autofac.Core.Activators.Reflection.DefaultConstructorFinder”找到的构造函数：无法解析参数'eWorld.WCFBLL.ImageArchive.IDocumentOperation
可以使用可用的服务和参数调用在“eWorld.WCFImplement.ServiceImplement.ImageArchiveService”类型上使用“Autofac.Core.Activato ...
python_13_break
for i in range(5): print('-----------',i) for j in range(5): print(j) if j>2: break####结束当前循环
借鉴一些关于js框架的东西
八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...
unix环境高级编程一书中部分错误处理函数
#include <unistd.h> #include <errno.h> #include <string.h> #include <stdio.h> ...
EasyUI获取正在编辑状态行的索引
function getRowIndex(target){ var tr = $(target).closest("tr.datagrid-row"); return paseIn ...
PHP添加扩展模块的方法
进入源码包对应扩展模块目录下 ##extname 代表扩展模块名 cd /usr/local/src/php-5.5.36/ext/extname 然后执行phpize##phpize是一个shell ...
vue.js 四（指令和自定义指令）
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...
CentOS下安装php gd库报错Error: php56w-common conflicts with php-common-5.3.3-48.el6_8.x86_64
因为服务器缺少php gd库,因为系统是centos,就是用yum去安装,一安装就报错如下: [root@iZ28sdxghs2Z ~]# yum install php-gd Loaded plug ...
2 > 1 and 3 < 4 or 4 > 5 and 2 < 1
a,b,c,d,e=1,2,3,4,5 m = b >a and c < d n = d > e and b < a y = m or n info = ''' m is %s ...
Java集合---List、Set、Iterator、Map简介
1.List集合 1.1概念 List继承自Collection接口.List是一种有序集合,List中的元素可以根据索引(顺序号:元素在集合中处于的位置信息)进行取得/删除/插入操作. 跟Set集合 ...

HTML表单与文件

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

随机推荐

热门专题