• 售前

  • 售后

热门帖子
入门百科

HTML5 form标签之解放表单验证、增长文件上传、集成拖放的利用方法

[复制链接]
刘余文 显示全部楼层 发表于 2021-10-25 19:59:41 |阅读模式 打印 上一主题 下一主题
HTML中与form有关的东东

            
新增属性

            
            
个人明白

            
            
form

            
            html5之前,表单内的附属元素需要放入标签中,现在可以为标签指定form标签即可
            点评:该功能办理了我们实际中碰到的一些题目,好比iframe模拟异步图片上传时,就必须将图片写到form外。
            
            
formaction

            
formmethod

            
            该属性用于按钮(submit)让表单提交页面可又按钮控制
            formmethod指定各按钮提交方式
            
            
placehoder

            
            该属性非常有用,用于文本框中表现提示信息,非常有用的一属性
            
            
list

            
            list属性需要与datalist一同利用,相称于文本框,模拟select,非常适用的一个属性
            
            
autofocus

            
            用于文本框主动获取焦点,有用的东东
            
            
新增input属性,解放验证,各欣赏器支持不好

            
            
tel

            
            
用于电话

            
            
url

            
            
验证url

            
            
email

            
            
验证邮箱

            
            
date/time

            
            
日期类验证,会出现日期选择插件哦。。。

            
            
number

            
            
只能是数字

            
            
range

            
            
控制数字范围

            
            
color

            
            
颜色选择器,好东西啊。。。

            
HTML5中增加了许多与form有关的属性,说着实的,这些东西至心知心啊!!!很大水平上讲:
完全解放表单验证
若不是考虑兼容性题目,老夫恨不得立刻投入其中,但一旦想起兼容性题目的话,你就会非常头疼!!!
因为本来很好的东西,却是因为汗青的缘故原由,反而会增加我们的工作量!!!
在错的时间,做对的事变,他看起来是对的,实际上也是对的。。。但你会发现,他错了。。。。
加强页面元素

            
项目

            
            
个人明白

            
            
figure/figcaption

            
            听说表示页面独立内容,移除后无影响,暂无发现用处..
            
            
details

            
            该标签有点意思,用于替换js中,元素收起展开功能。
            最新ff都不支持……个人以为,既然提供了该标签应该提供属性表示上下展开大概左右展开;
            
            
mark

            
            高亮表现,认真语义化
            
            
progress

            
            屌丝们,可以告别gif图片了,也不消div模拟百分比了,与windows地区同等的进度条出现啦,异步文件上传更加完善!
            
            
改良ol

            
            
老夫就没有用过这个主。。。

            
            
……

            
以上元素属于无关告急的元素,不必赘述,接下来,本文明星对象登场:
文件API

FileList与file对象:
在html4中,file标签只允许选择一个文件,但html5中,对file标签设置multiple属性后,变可以选择多文件了!!!
而,选择后便会形成这里的filelist对象,即一个个file构成的对象列表,简单来说就是file数组。
file对象具有2属性,name代表文件名(不包罗路径),lastModifiedDate表示最后修改时间
实在我们在html4中操纵file时,可以获取当地许多属性,好比文件巨细,但是万恶的ie不支持,到ie9后才有所好转。
所以想客户端提示文件上传过大的同学放弃吧。。。

Blob对象
表示二进制原始数据,提供一slice方法访问字节内部原始数据;size表示blob对象字节长度、type表示其mime类型,类型未知则返回空字符串。
来来,简单做一实行:

复制代码代码如下:
关于File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#wl').click(function () {
                 var f = $('#file')[0];

                 var s = '';

             });
         });
     </script>
</head>
<body>
     <input type="file" id="file" multiple />
     <button id="wl">
         文件上传</button>
</body>
</html>


我们在ff中选择图片后,提交,设个断点看看:

file主角登场,就是他了,我们将之属性输出来看看:

真的是应有尽有啊!有了该属性就可以做许多事变了,但是。。。我们来看看ie7、8:

各位观众,人家压根没这个属性,所以统统百搭。。。
话说,我以为ie欣赏器调试起来很痛楚,叨教各位大神有没有什么好的ie开发插件,就像ff的firebug,google自带的插件??

FIleReader接口
filereader接口,可将文件读入内存,有了这个东东我们就可以很舒服的做图片预览了,但他的公用不止如此。
filereader的四个方法:
readAsBinaryString 将文件读取为二进制码——通常我们将数据传给后端;
readAsText 将文件读取为文本——读取文本内容;
readAsURL 将文件读取为DataURL——一样寻常是小文件,图片大概html;
abort 中断读取,因为文件过大等候时间就很长了

filereader接口变乱:
onabort 读取中断触发;
onerror 读取失败触发;
onloadstart 开始读取时触发;
onprogress 读取中
onload 读取成功时触发;
onloadend 读取完成后触发,无论成功失败;
光说不练不可,我们这里做个小实行:

复制代码代码如下:
我是一个小实行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var bt = $('#wl');
             var file = $('#file');
             var type = $('#type');
             var result = $('#result');

             var func = {};
             func.readAsDataURL = function (file) {
                 //验证是否为图片
                 if (!/image\/\w+/.test(file.type)) {
                     alert('非图片格式');
                     return false;
                 }
                 var reader = new FileReader();
                 reader.readAsDataURL(file);
                 reader.onload = function (e) {
                     result.html('<img src="' + this.result + '"/>');
                 }
             }

             func.readAsBinaryString = function (file) {
               
                 var reader = new FileReader();
                 reader.readAsBinaryString(file);
                 reader.onload = function (e) {
                     result.html(this.result);
                 }
             }

             func.readAsText = function (file) {
               
                 var reader = new FileReader();
                 reader.readAsText(file);
                 reader.onload = function (e) {
                     result.html(this.result);
                 }
             }

             bt.click(function () {
                 if (func[type.val()] && typeof func[type.val()] == 'function') {
                     func[type.val()](file[0].files[0]);
                 }
             });

         });
     </script>
</head>
<body>
     <div id="result">
     </div>
     <input type="file" id="file" multiple />
     <select id="type">
         <option value="readAsDataURL">readAsDataURL</option>
         <option value="readAsBinaryString">readAsBinaryString</option>
         <option value="readAsText">readAsText</option>
     </select>
     <button id="wl">
         读取文件</button>

</body>
</html>


用最新欣赏器运行试试呢!
我们再做一个判断,看看其变乱实行顺序:
       reader.onload = function (e) {
                    alert('onload');
                }
                reader.onprogress = function (e) {
                    alert('onprogress');
                }
                reader.onerror = function (e) {
                    alert('onerror');
                }
                reader.onloadstart = function (e) {
                    alert('onloadstart');
                }
                reader.onloaded = function (e) {
                    alert('onloaded');
                }
此处具体应用:


复制代码代码如下:
简单图片上传
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <style type="text/css">
      body{ font-size: 14px;}
     .image_upload{ margin:10px; border: 1px solid #E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative; }
     .image_upload img{ max-height: 150px; max-width: 150px; }
     .image_upload .rate { position: absolute; top: 6px; left: 6px; padding: 0 5px; color: White; background: black; border-radius: 5px;  filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }
    .image_upload .delete { background: url("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right: -6px; top: -6px; width: 16px;}
   
     </style>
     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var j_bt_sub = $('#submitForm'),
                 j_form = $('#form'),
                 j_state = $('#upState'),
                 j_file = $('#files');
             var is_support = true; //判断是否支持高级特性,经测试如果不支持filereader与file
             if (typeof FileReader === 'undefined') is_support = false;

             j_file.change(function () {
                 var file = j_file.get(0);
                 if (!file.files[0]) is_support = false;

                 //支持高级功能的欣赏器
                 if (is_support) {
                     files = file.files;
                     for (var k = 0, len = files.length; k < len; k++) {
                         var file = files[k];
                         var reader = new FileReader();
                         reader.readAsDataURL(file);
                         (function (k) {
                             reader.onloadend = function (e) {
                                 if (reader.error) {
                                     alert(reader.error);
                                 } else {
                                     var up = $('<div class="image_upload" id="up_' + k + '"></div>');
                                     var img = $('<img src="' + this.result + '" alt="" id="img_' + k + '">');
                                     var rate = $('<div class="rate" id="rate_' + k + '">0%</div>');
                                     var del = $('<div class="delete" title="删除" id="del_' + k + '"></div>');
                                     up.append(img);
                                     up.append(rate);
                                     up.append(del);
                                     del.click(function () {
                                         $(this).parent().remove();
                                     });
                                     j_state.append(up);
                                 }
                             };
                         })(k);
                     } //for
                 } else {
                     //不支持的话接纳传统方式
                 }
             });

             //此处应该支持平滑退却,后面考虑
             j_bt_sub.click(function (e) {
                 if (is_support) {
                     var file = j_file.get(0);
                     files = file.files;
                     for (var k = 0, len = files.length; k < len; k++) {
                         var file = files[k];
                         upload(file, k);
                     }
                 }
             });

             function upload(file, k) {

                 var up = $('#up_' + k);
                 var img = $('#img_' + k);
                 var rate = $('#rate_' + k);
                 var del = $('#del_' + k);

                 var fd = new FormData();
                 fd.append('upload', file);
                 var xhr = new XMLHttpRequest();
                 xhr.upload.addEventListener('progress', function (e) {
                     var percentComplete = Math.round((e.loaded) * 100 / e.total);
                     rate.html(percentComplete.toString() + '%');
                 }, false);
                 // 文件上传成功或是失败
                 xhr.onreadystatechange = function (e) {
                     if (xhr.readyState == 4) {
                         if (xhr.status == 200) {
                             rate.html('100%');
                             var url = xhr.responseText;
                             img.attr('src', url);
                             var s = '';
                         }
                     }
                 };
                 xhr.open("POST", "fileUpload.ashx");
                 //发送            
                 xhr.send(fd);
             }

         });   
     </script>
</head>
<body>
     <div id="upState"></div>
     <form id="uploadForm" action="fileUpload.ashx" method="post" enctype="multipart/form-data">
     <input id="files" type="file" size="30" name="file[]" multiple />
     <button type="button" id="submitForm">上传图片</button>
     </form>
</body>
</html>

拖放API实在之前,我还用jquery写了个拖放的插件呢。。
工作中碰到的一些东西【弹出窗口】【拖放】【异步文件上传】
但是集成在HTML5中固然更好!!!我们现在来看看这个东东。。。而且它的强盛之处,就是不止在欣赏器中拖动,这就不得了了哦(拖动图片上传)
html5中默认对图片、链接可以拖放,别的元素需要设置draggable="true"才能拖放,事不宜迟,老夫立刻去试试。

复制代码代码如下:
<strong>拖放的例子
</strong> <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     
</head>
<body>
<div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">请拖放</div>
<div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div>
<script type="text/javascript">
     document.ondragover = function (e) {
         e.preventDefault();
     };
     document.ondrop = function (e) {
         e.preventDefault();
     };

     var source = document.getElementById('dragme');
     var dest = document.getElementById('text');
     source.addEventListener('dragstart', function (e) {
         var dt = e.dataTransfer;
         dt.setData('text/plain', '您好' + new Date());
     }, false);

     dest.addEventListener('dragend', function (e) {
         e.preventDefault();
     }, false);

     dest.addEventListener('drop', function (e) {
         var dt = e.dataTransfer;
         var text = dt.getData('text/plain');
         dest.innerHTML += text;
         e.stopPropagation();
         e.preventDefault();
         return false;
     }, false);
     
     </script>
</body>
</html>


拖放时间一定要记住,阻止页面默认活动,否则会打开新窗口的,其中以下亦是重点:
1 拖放可利用DataTransfer传递数据,该对象是非常有用的,因为在拖动目的元素时,大概会颠末别的元素,我们可以用此传递信息;
API:
dragstart 被拖放元素 开始拖放时
drag 被拖放元素 拖放过程中
dragenter 拖放过程中鼠标颠末的元素 被拖放元素开始进入本元素时
dragover  拖放过程中鼠标颠末的元素 本元素内移动
drageleave  拖放过程中鼠标颠末的元素 离开本元素
drop 拖放的目的元素 拖动的元素放到了本元素中
dragend 拖放的对象 拖放竣事
实在这里是有题目的,我并未去深入研究从开始拖动到颠末各种元素会产生神马情况,这个可以作为二次学习时的重点研究对象。
结语
html5的文件和表单做的比力风雅,个人感觉比布局新增的几个标签有用多了,来日诰日开始学习canvas,虽然不懂,虽然见过,但是照旧感觉很厉害的样子!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作