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

> 单图片上传

> 1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。

> 2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。

> 3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。

> 4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。

上传图片

        上传图片

    // 监听 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 + ')');
        });
    });

> 多图片上传

> 1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。

> 2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。

> 3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。

> 4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。

上传图片

        上传图片

    require(['jquery'], function () {
        var tpl = 'ဆ';
        $('[name="file_2"]').on('change', function () {
            var input = this, values = [], srcs = this.value.split('|');
            $(this).prevAll('.uploadimage').map(function () {
                values.push($(this).attr('data-tips-image'));
            }), $(this).prevAll('.uploadimage').remove();
            values.reverse();
            for (var i in srcs) {
                values.push(srcs[i]);
            }
            this.value = values.join('|');
            for (var i in values) {
                var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
                $tpl.data('input', input).data('srcs', values).data('index', i);
                $tpl.on('click', 'a', function (e) {
                    e.stopPropagation();
                    var $cur = $(this).parent();
                    $.msg.confirm('确定要移除这张图片吗？', function () {
                        var data = $cur.data('srcs');
                        delete data[$cur.data('index')];
                        $cur.data('input').value = data.join('|');
                        $cur.remove();
                    });
                });
                $(this).before($tpl);
            }
        });
    });

> 单文件上传

> 1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。

> 2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：zip,rar。

> 3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。

> 4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。

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

{/block}