amazeui表单提交实例
amazeui表单提交实例，实现文件上传，图片预览，表单提交文件+数据。
<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>
<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 = $('').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>
<input type="hidden" name="fileBase64" id="fileBase64" value="">
<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 = '源文件大小：' +
sourceSize + 'KB' +
'
' +
'上传后大小：' +
resultSize + 'KB (省' + scale + '%)' +
' ';
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>