欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 form标签之解放表单验证、增进文件上传、集成拖放的行使要领

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

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中选择图片后,提交,设个断点看看:

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

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

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

真的是一应俱全啊!有了该属性就可以做许多工作了,可是。。。我们来看看ie7、8:

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

列位观众,人家压根没这个属性,以是统统百搭。。。

话说,我认为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');
                }

此处详细应用:
HTML5 form标签之解放表单验证、增长文件上传、集成拖放的利用方式



代码如下:
简朴图片上传
<!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>

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

拖放时辰必然要记着,阻止页面默认举动,不然会打开新窗口的,个中以下亦是重点:

1 拖放可行使DataTransfer转达数据,该工具长短常有效的,由于在拖动方针元素时,也许会颠末其余元素,我们可以用此转达信息;

API:

dragstart 被拖放元素 开始拖放时

drag 被拖放元素 拖放进程中

dragenter 拖放进程中鼠标颠末的元素 被拖放元素开始进入本元素时

dragover  拖放进程中鼠标颠末的元素 本元素内移动

drageleave  拖放进程中鼠标颠末的元素 分开本元素

drop 拖放的方针元素 拖动的元素放到了本元素中

dragend 拖放的工具 拖放竣事

其拭魅这里是有题目的,我并未去深入研究从开始拖动到颠末各类元素会发生神马环境,这个可以作为二次进修时的重点研究工具。

结语

Html5的文件和表单做的较量美丽,小我私人感受比机关新增的几个标签有效多了,来日诰日开始进修canvas,固然不懂,固然见过,可是照旧感受很锋利的样子! 

本文地址:http://itbyc.com/web/html5/13644.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1