Bootstrap FileInput插件如何实现单击按钮预览图片变换

孟林-David.Meng 2018-03-24 03:59:11
需求为下面2点
1、刚进入页面的时候,已经有1张预览的图片
2、我单击按钮,需要改变预览的图片为其他图片
如何实现
代码如下所示
var control = $("#model_file");
var uploadrul = "/bootstrap-fileinput-master/examples/UploadFile.ashx";
var upObj = {
language: 'zh', //设置语言
uploadUrl: uploadrul, //上传的地址
uploadExtraData: { "savepath": "/bootstrap-fileinput-master/examples/" },//上传至服务器的参数,非常重要
allowedFileExtensions: ['xml', 'docx', 'jpg', 'png', 'gif', 'rar', 'doc'],//接收的文件后缀
showUpload: true, //显示批量上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
maxFileSize: 4096,//单位为kb,如果为0表示不限制文件大小
minFileCount: 0,
maxFileCount: 10,
msgSizeTooLarge: " \"{name}\" 大小为({size} KB) 最大文件大小为 {maxSize} KB.请重新上传!",//文件的实际大小有些许偏差
enctype: 'multipart/form-data',
validateInitialCount: true,
initialPreviewAsData: true,
initialPreview: "<img src='http://localhost:41461/bootstrap-fileinput-master/examples/1.png' width='100px' height='100px'>",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
allowedPreviewTypes: ['image']//能够预览的文件类型,如果不限制。文件预览时可能很慢
};
$('#modalShow').html("[请选择"+upObj.allowedFileExtensions+"]文件");
control.fileinput(upObj);

//这里怎么实现
$("#btnSet").click(function () {
});
...全文
479 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧