针对FastAdmin新增上传多个图片,新增上传的视频的预览效果

简介: 针对FastAdmin新增上传多个图片,新增上传的视频的预览效果

fastAdmin新增上传图片预览效果

针对同时上传的图片拼接和上传视频的预览效果,发现网上的教程少的可怜。在此自己实用的基础之上,做如下总结。

同时新增多个图片:

*<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('img_list')}:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-img_list" class="form-control" size="50" name="row[img_list]" type="text" value="{$row.img_list|htmlentities}">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-img_list" class="btn btn-danger plupload" data-input-id="c-img_list" data-mimetype="mp4/*/" data-multiple="true" data-preview-id="p-img_list"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                <span><button type="button" id="fachoose-img_list" class="btn btn-primary fachoose" data-input-id="c-img_list" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
            </div>
            <span class="msg-box n-right" for="c-img_list"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-img_list"></ul>
    </div>
</div>*


相关文章
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
667 0
|
JavaScript 前端开发 数据库
让你少踩坑的fastadmin教程(3)
让你少踩坑的fastadmin教程
1785 0
让你少踩坑的fastadmin教程(3)
|
PHP 数据库
fastadmin框架如何查询数据表指定时间段内的数据
fastadmin框架如何查询数据表指定时间段内的数据
845 0
|
JavaScript
fastadmin表格列表内部自定义按钮
fastadmin表格列表内部自定义按钮
652 0
fastadmin表格列表内部自定义按钮
|
数据安全/隐私保护
fastadmin是如何设置没有权限的用户不能访问某些页面的?
fastadmin是如何设置没有权限的用户不能访问某些页面的?
905 0
fastadmin设置跨域
fastadmin设置跨域
1091 0
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
873 0
fastadmin实现导出Excel和导入Excel数据
fastadmin实现导出Excel和导入Excel数据
1053 0
fastadmin中Validate和validate的区别
fastadmin中Validate和validate的区别
350 0
fastadmin框架select下拉框该怎么写(接口数据)
fastadmin框架select下拉框该怎么写(接口数据)
1123 0