针对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>*


相关文章
|
6月前
|
API
【sgUpload】自定义组件:自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image。
【sgUpload】自定义组件:自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image。
|
1月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
42 3
element用户上传头像组件带大图预览,和删除功能
element用户上传头像组件带大图预览,和删除功能
|
6月前
|
搜索推荐
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
|
6月前
|
API
【sgUpload_v2】自定义组件:升级自定义上传组件,支持拖拽上传、弹窗上传单个或多个文件/文件夹,并且获取文件夹结构路径树,然后在右下角出现上传托盘。
【sgUpload_v2】自定义组件:升级自定义上传组件,支持拖拽上传、弹窗上传单个或多个文件/文件夹,并且获取文件夹结构路径树,然后在右下角出现上传托盘。
uniapp上传多张图片-带删除按钮查看大图效果demo(整理)
uniapp上传多张图片-带删除按钮查看大图效果demo(整理)
实现手动上传表单数据+图片文件
在很多项目中都会有上传数据+图片的需求,我最近在项目中负责活动发布的板块,需要几个表单数据加两个图片和一个图片数组,我看到产品需求后头就很大,我之前没有做过相关的业务,所以这几天一直在尝试,看到接口文档我内心已经崩了。
161 1
实现手动上传表单数据+图片文件
|
移动开发 JSON 前端开发
前端H5选图预览到上传
在金融性质的App里,选择本地相册图片或者拍照,然后预览并且上传是一个典型的使用场景,比如常见的身份证信息上传。在最近接触的几家银行客户里,都反馈有类似的场景,并且在使用上都或多或少的遇到一些问题,最后找到我们,希望我们提供一些最佳实践。在这里分享下对应场景的一些优化解决方案。
401 0
前端H5选图预览到上传
|
存储 Web App开发 前端开发
移动端图片操作(一)——上传
上传我们一般都是用“input[type=file]”控件。当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象。
移动端图片操作(一)——上传
|
JavaScript 程序员 API
Nodejs实现图片的上传、压缩预览、定时删除。
我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番。