layui图片上传如何实现上传之前先预览_教程

<head>

<title>Test upload with Layui2</title>

<style>

.thumb {margin-left:5pxmargin-top:15pxheight:128px}

#prevModal {width:100%height:100%text-align:centerdisplay:none}

#img_prev {max-width:98%max-height:98%margin: 10px auto}

</style>

</head>

<body>

<i class="layui-icon"></i>选择图片

layui的所有图标全部采用字体形式(单一色彩)，取材于阿里巴巴的矢量图标库。

通过对一个内联元素(一般使用的是i标签)，设定 class=="layui-icon" ，来定义一个图标，然后对元素加上图标对应的 font-class ，即可显示出对应的图标。

向任意HTML元素设定 class="layui-btn" ，建立一个基础按钮，通过追加格式为 layui-btn-{type} 的class来定义其他按钮风格，内置的按钮class可以进行任意组合，从而形成更多风格的按钮，所有的按钮统一使用 button 标签来实现。不要使用input下的 type="button" 。

新建button元素，然后在元素上加上 layui-btn 的类名

select内option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项(存在value值)作为默认的选中项。

原生的select option元素无法装饰，因此所有UI框架都是采用的元素模拟的方式来实现，即将原生的select元素樱册隐藏，用js生成其他并设置样式，所以需要在网页上激活UI框架的渲染功能。

optgroup标签给select分组，每个分组的提示信息由optgroup元素的label属性的值决定的。

layui的复选框组件中，title是设定元素的名称，一般用于checkbox、radio框， lay-skin：定义checkbox元素的风格，不设置为默认风格，primary为原始风格。

当 lay-skin 的值为switch时，title的文字失效，开关前后的状态显示的文字由 lay-text 内决定，格式为：选中提示文字|未选中提示文字。

title：设定的元素名称，一般用于checkbox、radio框。

layui框架使用js生成了一个div结构用来展示title标签的文字和模拟选中时的logo效果，而原生的input元素则被隐藏脊烂宏掉，disabled开历肆启禁用，设置value来实现自定义的值，否则选中时返回的就是默认的on.

打开IE8，如果兼容性视图在IE8中不能直接切换，在地址栏中显示的样子如下,

可以看到画红色迟衫拆圈的地方，一个是刷新，一个是停止。没有兼容性视图的按码枣钮。

打开兼容性视图设置

选择【页面】，单击【兼容性视图设置】，

设置兼容性视图

必须先把【在塌薯兼容性视图中显示所有网站】前面的复选框的勾选去掉，然后才能勾选上面两个，

查看浏览器地址栏的变化

设置完毕后，单击【关闭】即可。然后查看地址栏如下,

可以看到，增加了一个按钮，它叫”兼容性视图”，这样在浏览网站的时候，就可以根据不同网站的需求来回切换了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/8159866.html

layui图片上传如何实现上传之前先预览

发表评论

评论列表（0条）