{extend name='extra@admin/content'}

{block name="content"}

<style>
    .uploadbutton {line-height: 50px;display: inline-block;position: absolute;margin-left: 10px;top: 20px;}
</style>

<div class="code">
    <blockquote class="site-text layui-elem-quote">
        单图片上传
        <hr />
        <p style='font-size:12px;line-height:26px'>
            1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。
        </p>
        <p style='font-size:12px;line-height:26px'>
            2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。
        </p>
        <p style='font-size:12px;line-height:26px'>
            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
        </p>
        <p style='font-size:12px;line-height:26px'>
            4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
        </p>
    </blockquote>
    <div style="position:relative">
        <div class="uploadimage"><input type="hidden" name="file_1"/></div>
        <a data-file="one" data-field="file_1" data-type="png,jpg" data-uptype="local" href="javascript:void(0)" class="uploadbutton">上传图片</a>
    </div>
    <script>
        require(['jquery'], function () {
            $('[name="file_1"]').on('change', function () {
                $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
            });
        });
    </script>

    <pre class="layui-code" lay-title="HTML代码">

<div style="position:relative">
    <div class="uploadimage"><input type="hidden" name="file_1"/></div>
    <a data-file="one" data-field="file_1" data-type="png,jpg" data-uptype="local" href="javascript:void(0)" class="uploadbutton">上传图片</a>
</div>
    </pre>

    <pre class="layui-code" lay-title="javascript代码">

// 监听 input 的 onchange 事件
// 当有文件上传时，会触发 change 事件
require(['jquery'], function () {
    $('[name="file_1"]').on('change', function () {
        $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
    });
});
    </pre>
</div>

<div class="code">
    <blockquote class="site-text layui-elem-quote">
        单文件上传
        <hr />
        <p style='font-size:12px;line-height:26px'>
            1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。
        </p>
        <p style='font-size:12px;line-height:26px'>
            2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：zip,rar。
        </p>
        <p style='font-size:12px;line-height:26px'>
            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
        </p>
        <p style='font-size:12px;line-height:26px'>
            4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
        </p>
    </blockquote>
    <div style="position:relative;width:500px">
        <div class="input-group">
            <input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
            <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
                <i class="fa fa-file"></i>
            </a>
        </div>
    </div>
    <script>
        require(['jquery'], function () {
            $('[name="file_2"]').on('change', function () {
                alert('文件上传后的地址：' + this.value);
            });
        });
    </script>

    <pre class="layui-code" lay-title="HTML代码">

<div style="position:relative;width:500px">
     <div class="input-group">
         <input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
         <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
             <i class="fa fa-file"></i>
         </a>
     </div>
 </div>

    </pre>
    <pre class="layui-code" lay-title="javascript代码">

// 监听 input 的 onchange 事件
// 当有文件上传时，会触发 change 事件
require(['jquery'], function () {
    $('[name="file_2"]').on('change', function () {
        alert('文件上传后的地址：' + this.value);
    });
});
    </pre>


</div>

<script>
    layui.use('code', function () {
        layui.code({
            encode: true
        });
    });
</script>
{/block}