这段时间准备写个属于自己的CMS。刚好下雨，加班加点吧。有点急。

用后台模板的时候发现layui还是蛮漂亮的，但由于一些别的想法最终放弃了。还是用自己搞的一套吧，不过自己觉得layui里面的传图控件还是蛮好的。由于这次写的是CMS，里面涉及到配置文件里动态加图，单然最好就是ajax提交图了，网上看了下有的说为了安全图必须在表单里才能上传的。百度折腾了一下，放上来。照例放代码片段吧。

前台部分

codelayui.code
<div class="page-container">
<form class="form form-horizontal" id="form" action="{:url('system/system_save')}">
<div id="tab-system" class="HuiTab">
<div class="tabBar cl">
{volist name="Think.config.CONFIG_GROUP_LIST" id="group"}
<span>{$group}</span>
{/volist}
</div>
{volist name="conftab" id="vo"}
<div class="tabCon">
{volist name="vo" id="voo"}
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">{$voo.title}：</label>
<div class="formControls col-xs-8 col-sm-9">
{switch name="voo.type"}
{case value="0"}
<input type="number" name ="config[{$voo.name}]" placeholder="{$voo.remark}" value="{$voo.value}" class="input-text">
{/case}
{case value="1"}
<input type="text" name ="config[{$voo.name}]" placeholder="{$voo.remark}" value="{$voo.value}" class="input-text">
{/case}
{case value="2"}
<textarea name="config[{$voo.name}]"  class="textarea" placeholder="{$voo.remark}" dragonfly="true" >{$voo.value}</textarea>
{/case}
{case value="3"}
<textarea name="config[{$voo.name}]" cols="" rows="" class="textarea"  placeholder="{$voo.remark}" dragonfly="true" >{$voo.value}</textarea>
{/case}
{case value="4"}
<select name="config[{$voo.name}]"  class="select" style="width:120px;">
{volist name=":parse_config_attr($voo['extra'])" id="vo1"}
<option value="{$key}" {eq name="voo.value" value="$key"}selected{/eq}>{$vo1}</option>
{/volist}
</select>
{/case}
{case value="5"}
<input type="hidden" name ="config[{$voo.name}]"  value="{$voo.value}" id="val_{$voo.name}" >
<img src="{$voo.value}" style="width: 100px;height: 50px; margin:20px;" id="img_{$voo.name}" >
<a href="javascript:;" class="file" title="点击选择所要上传的图片" >上传图片
<input type="file"   data-href="{$voo.name}" name="image[]" id="file_{$voo.name}" multiple="multiple"/>
</a>
{/case}
{/switch}
</div>
</div>
{/volist}
  </div> 
{/volist}
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
</div>
</div>
</form>
</div>
{/block}
{block name="footerjs"}
{/*请在下方写此页面业务相关的脚本*/ }
 
 
<script type="text/javascript">
$(function(){
$.Huitab("#tab-system .tabBar span","#tab-system .tabCon","current","click","0");
 
function getObjectURL(file,field) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        $("#oldcheckpic_"+field).val("nopic");
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        $("#oldcheckpic_"+field).val("nopic");
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        $("#oldcheckpic_"+field).val("nopic");
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
 
$("input[id^=file_]").change(function () {
    var field=$(this).attr('data-href'),objUrl = getObjectURL(this.files[0],field);
    if (objUrl) {
        $("#img_"+field).attr("src", objUrl);
    }
    //创建FormData对象
        var data = new FormData();
        //为FormData对象添加数据
        $.each($(this)[0].files, function(i, file) {
            data.append('file', file);
        });
        $.ajax({
            url:'{:url('api/upload/index',['catid'=>1])}',
            type:'POST',
            data:data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            success:function(data){
                if(data.info){
                    if (data.status==1) {
                   
$("#val_"+field).val(data.src);
                    }else{
                        layer.msg(data.info,{icon:2,time:3000});
                    }  
                }else{
                    layer.msg("服务器响应错误",{icon:5});
                }
        }});
});
});
</script>

这里前台在ajax传图前就可以取到图预览的，也是看的别人的代码。觉得不错。后台图上传部分就不贴了。跟thinkphp5里面的传图教程差不多的。