amazeui表单提交实例

最新推荐文章于 2021-08-05 10:15:55 发布
奕起学习
最新推荐文章于 2021-08-05 10:15:55 发布
阅读量3.9k
点赞数 1
分类专栏： amazeui 文章标签：表单 amazeui amazeui表单文件上传图片上传
amazeui 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
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>