crm/app/sys/view/material/evidenceadd.html

{extend name="public/layout" /} {block name="title"}素材库{/block}
{block name="body"}
<div class="layui-fluid" style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form">
                        <input id="symbshowed" type="hidden" value=""/>
                        <input id="category_name" type="hidden" value="evidence"/>
                        <div class="layui-form-item layui-hide" >
                            <label class="layui-form-label">命名</label>
                            <div class="layui-input-inline" style="width: 290px;">
                                <!--                                <input type="radio" name="myradio" value="local_name" /> 上传文件名字保持本地文件名字-->
                                <input type="radio" name="myradio" value="random_name" checked=true/> 上传文件名字是随机文件名, 后缀保留
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图片</label>
                            <div class="layui-input-inline" style="width: 590px;" id="container">
                                <a class="layui-btn btn" id="selectfiles" href="javascript:void(0);" >选择文件</a>
                                <a class="layui-btn btn" id="postfiles" href="javascript:void(0);">开始上传</a>
                                <div id="ossfile"></div>
                                <!--                                <div class="layui-form-mid layui-word-aux" style="color: red!important;">注：可上传图片、视频格式的封面，限制2M内.</div>-->
                                <div class="layui-form-mid layui-word-aux" style="color: darkgray;">[图片宽高比为1.7比1。推荐1200*700px或1543*900px或1851*1080px。 可上传jpg,png,bmp,jpeg格式的文件，文件大小应小于1Mb，最大不超过2Mb ]</div>
                                <pre id="console"></pre>
                                <input type="hidden" value="" id="fileuri">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">见证描述</label>
                            <div class="layui-input-block">
                                <textarea id="wxshow_content" name="desc" placeholder="图片相关描述" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="form">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
<script>


  var evidenceossapiurl = '{:url("apievidencesaving")}';

  layui.use(['form', 'laydate', 'upload', 'element'], function () {
    var $       = layui.jquery
      , element = layui.element
      , form    = layui.form
      , laydate = layui.laydate;


    form.on("submit(form)", function (obj) {
      if ($(obj.elem).hasClass('layui-btn-disabled')) return false;
      $(obj.elem).addClass('layui-btn-disabled');
      var formData = new FormData(obj.form);
      if( $('#fileuri').val() === ''){
        layer.msg('图片还未上传,请上传图片！',{anim: 6,time: 400});
        $(obj.elem).removeClass('layui-btn-disabled');
        return false;
      }else{
        formData.append('oss_url',$('#fileuri').val());
      }
      console.log(formData);

      $.ajax({
        url        : evidenceossapiurl,
        type       : 'POST',
        data       : formData,
        dataType   : 'json',
        processData: false,
        contentType: false,
        success    : function (res) {
          if (res.code === 0) {
            layer.msg(res.msg, {anim: 0,time: 400}, function () {

              $(window.parent.document).find("#img_ids").append('<span class="eviid">'+res.data.id+'</span>');
              $(window.parent.document).find("#img_attached_preview").append("<div class='evi-block'><img width='150px' src='https://o.nczyzs.com/"+res.data.media_url+"'><p class='evi-desc'>"+res.data.desc+"</p></div>");

              var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
              parent.layer.close(index);
            });
          } else {
            layer.msg(res.msg, {anim: 6,time: 400});
            $(obj.elem).removeClass('layui-btn-disabled');
          }
        }
      });
      return false;
    });


  });
</script>
{/block}
{block name="css"}
<style>
    .layui-form-label {
        width: auto;
    }

    .layui-input-block {
        float: right;
        margin-right: 60px;
    }

    .upload-img .area {
        padding-top: 40px;
        text-align: center;
    }

    .upload-img .area i {
        font-size: 50px;
        color: #009688;
    }

    .upload-img img {
        width: 100px;
        height: 125px;
    }

    .appendedone {
        display: inline;
        width: 85%;
    }

    .appendedmore {
        display: inline;
        width: 75%;
    }

    .appendedfarmore {
        display: inline;
        width: 70%;
    }

</style>
{/block}