bootstrap fileinput 设定图片预览长宽
2017-12-04 10:41
344 查看
有小伙伴在用bootstrap fileinput 时,上传图片后图片长宽不一致导致很丑,想要限制大小的话,像这样:
解决办法:
$('#activityImg').fileinput({ language: 'zh', uploadUrl: '${ctx}/activity/imgUpload', allowedFileExtensions: ['jpg', 'png', 'jpeg', 'gif', 'bmp'], allowedPreviewTypes : ['image', 'html', 'text', 'video', 'audio', 'flash'], dropZoneTitle: "上传图片640 * 350分辨率效果更好", // 这个配置就是解决办法了,初始化时限制图片大小 previewSettings: { image: {width: "100px", height: "100px"}, } })
效果图:
另外还有编辑时图片的初始化预览,以及其他一些问题有疑问的小伙伴可以评论留言哦,
相关文章推荐
- bootstrap 文件上传插件 fileinput.min.js 可以预览图片
- 由bootstrap-fileinput.js图片预览高度BUG谈谈如何提高驾驭开源插件的能力
- input-file的本地图片预览+等比例缩放-兼容IE8、火狐
- 纯CSS定义input file样式及上传图片预览 CSS
- bootstrap+fileinput插件实现可预览上传照片功能
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput的ajax异步上传
- 一段上传图片预览JS脚本,Input file图片预览的实现
- 文件上传预览插件 Bootstrap-fileinput组件封装及使用
- 读取input file路径预览图片
- javascript实现input file上传图片预览效果
- 解决BootStrap Fileinput手机图片上传显示旋转问题
- bootstrap fileinput 组件整合SpringMVC上传图片到本地磁盘
- Bootstrap文件(图片)上传插件File Input进阶使用说明
- input-file的本地图片预览+等比例缩放-兼容IE8、火狐
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- Bootstrap-fileinput 多图片上传编辑
- html,图片上传预览,input file获取文件等相关操作
- input file样式修改以及图片预览删除功能详细概括(推荐)
- Bootstrap中的fileinput 多图片上传及编辑功能
- 上传图片预览JS脚本 Input file图片预览的实现示例