amazeui表单提交实例
来源：互联网 发布：淘宝商品已过期 编辑：程序博客网 时间：2024/06/05 19:16
amazeui表单提交实例，实现文件上传，图片预览，表单提交文件+数据。
<!doctype html><html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> <script src="assets/js/jquery.min.js"></script> <script src="dist/lrz.all.bundle.js"></script> <script src="assets/js/amazeui.js"></script> <script src="assets/js/app.js"></script> <style type="text/css"> .image { padding: 10px; border: 1px solid #000; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; background: #fff; filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } </style> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <![endif]--><script> var progress = $.AMUI.progress; $(function() { $('.btn-loading-example').click(function () { var $btn = $(this) $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); $('form').submit(); }, 1000); }); $("#qt").click( function () { //$(liyou) if($('#qt').is(':checked')){ $('#liyou').show(); }else{ $('#liyou').hide(); } }); $('#doc-vld-msg').validator({ onValid: function(validity) { $(validity.field).closest('.am-form-group').find('.am-alert').hide(); }, onInValid: function(validity) { var $field = $(validity.field); var $group = $field.closest('.am-form-group'); var $alert = $group.find('.am-alert'); // 使用自定义的提示信息 或 插件内置的提示信息 var msg = $field.data('validationMessage') || this.getValidationMessage(validity); if (!$alert.length) { $alert = $('<div class="am-alert am-alert-danger"></div>').hide(). appendTo($group); } $alert.html(msg).show(); }, validate: function(validity) {//自定义验证必须要放到validate中处理 //自定义函数处理 var v = $(validity.field).val(); //用于判断如果当前对象是类.js-sync-validate的时候执行 if ($(validity.field).is('.js-sync-validate')) { if($('#qt').is(':checked')&&v.length==0){ validity.valid = false; return validity; }else{ validity.valid = true; validity.typeMismatch=true; return validity; } } } });});</script> </head> <body> <header style="z-index: 9999;" class="am-topbar .am-topbar-inverse "> <h1 class="am-topbar-brand" style="text-align: center;"> <a href="#"><b>案件投诉详情</b></a> </h1> </header> <form action="/sens.html" class="am-form" id="doc-vld-msg"> <fieldset> <div class="am-form-group"> <label for="doc-vld-name-2-1">唯一编码：</label> 1615000016 </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">设施名称：</label> 自行车存车架 </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">所在区县：</label> 新建 </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">所在道路：</label> 延庆县 </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">产权单位：</label> 东长安街 </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">设施图片：</label> <p> <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"> <li> <div class="am-gallery-item"> <img src="img/2016072243244_small.jpeg" alt="东长安街" data-rel="img/2016072243244_big.jpeg"/> <h3 class="am-gallery-title"></h3> </div> </li> </ul> </p> </div> <legend>我要投诉</legend> <div class="am-form-group"> <label for="doc-vld-name-2-1">联系电话：</label> <input type="text" id="doc-vld-name-2-1" minlength="3" placeholder="请输入您的联系方式" required/> </div> <div class="am-form-group"> <label for="doc-vld-name-2-1">姓名：</label> <input type="text" id="doc-vld-name-2-1" minlength="3" placeholder="请输入客户姓名" required/> </div> <div class="am-form-group"> <h3>投诉内容<sup class="am-text-danger">*</sup> （至少 1项，至多 3项）</h3> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="1" data-am-ucheck required minchecked="1" maxchecked="4"> 设施脏污 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="2" data-am-ucheck> 丧失功能或闲置 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="3" data-am-ucheck> 设施破损 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="4" data-am-ucheck> 小广告未清理 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="5" data-am-ucheck> 改变用途 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="6" data-am-ucheck> 违法发布广告 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="7" data-am-ucheck> 阻碍通行 </label> <label class="am-checkbox"> <input type="checkbox" name="cbx" value="8" data-am-ucheck> 违法经营 </label> <label class="am-checkbox"> <input id="qt" type="checkbox" name="cbx" value="9" data-am-ucheck> 其它 </label> </div> <div class="am-form-group" id="liyou" style="display: none;"> <label for="doc-vld-sync">其他理由：</label> <input type="text" class="js-sync-validate" id="doc-vld-sync" placeholder="当点选其它的时候需填写理由"/> </div> <legend>上传照片</legend> <!--后台接收的Base64码，这里需要注意的是生成的Base64码前面带有一个头信息，这个头信息需要进行手工处理--> <input type="hidden" name="fileBase64" id="fileBase64" value=""> <!--file上传文件--> <div class="am-form-group am-form-file"> <div> <button type="button" class="am-btn am-btn-default am-btn-sm"> <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button> </div> <input type="file" capture="camera" accept="image/*" name="logo" id="file"> </div> <!--用于显示图片内容--> <div id="imgView"></div> <button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...'}"> 投诉</button> </fieldset> </form> <div data-am-widget="gotop" class="am-gotop am-gotop-default "> <a href="#top" title="回到顶部"> <span class="am-gotop-title ">回到顶部</span> <i class="am-gotop-icon am-icon-chevron-up"></i> </a> </div> </body> <script type="text/javascript"> document.querySelector('input[type=file]').addEventListener('change', function () { $.AMUI.progress.inc(0.4); var that = this; lrz(that.files[0], { width: 800 }) .then(function (rst) { //如果是ajax请求到后台的话，代码也在这里写，具体写法请参考自带的例子， //这里是通过submit将数据统一提交，所以只保存到隐藏域中即可 var imgView = document.getElementById("imgView"); img = new Image(), div = document.createElement('div'), p = document.createElement('p'), sourceSize = toFixed2(that.files[0].size / 1024), resultSize = toFixed2(rst.fileLen / 1024), scale = parseInt(100 - (resultSize / sourceSize * 100)); img.width = 500; img.height =500; img.className='image'; imgView.innerHTML = "";//先清空原先数值 p.style.fontSize = 13 + 'px'; p.innerHTML = '源文件大小：<span>' + sourceSize + 'KB' + '</span> <br />' + '上传后大小：<span>' + resultSize + 'KB (省' + scale + '%)' + '</span> '; div.className = ''; div.appendChild(img); div.appendChild(p); img.onload = function () { document.querySelector('#imgView').appendChild(div); }; img.src = rst.base64; progress.done(); //保存到隐藏域中。 document.getElementById("fileBase64").value = rst.base64; return rst; }); }); function toFixed2 (num) { return parseFloat(+num.toFixed(2)); } </script></html>阅读全文
1 0
- amazeui表单提交实例
- AmazeUi异步表单验证实例
- Ajax表单提交实例
- Ajax表单提交实例
- Ajax表单提交实例
- asp.net 提交表单实例
- jquery阻止表单提交实例
- jquery表单提交简单实例
- jquery ajax提交表单实例
- Ajax无刷新提交表单实例
- Ajax无刷新提交表单实例
- JAVA Web防止表单重复提交实例
- js判断阻止表单提交实例
- Jquery.Form 异步提交表单实例
- Struts2+ajax之form表单提交实例
- JAVA Web防止表单重复提交实例
- JAVA Web防止表单重复提交实例
- Struts2提交表单实例和struts主题
- Hexo博客添加SEO-评论系统-阅读统计-站长统计
- openGL ES进阶教程（五）制作一个简单的VR播放器，播放全景视频
- sharedpreference入门
- 推荐给大家一个优惠卷搜索网站
- java分布式服务框架Dubbo的介绍与使用
- amazeui表单提交实例
- hadoop ha配置后一个namenode不能自动failover，相当于没有配置ha
- 设计模式之禅笔记-适配器模式
- HDU6063 [2017多校联合3] RXD and math 打表 快速幂
- Handler机制更新UI线程控件
- Java二维数组
- 网络协议
- 对SAS知识的点滴回顾
- 驱动中IRP分类
