amazeui表单提交实例
臧兴学
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>
类似资料：