bootstrap-fileinput 插件使用总结(最近做项目应用到了这个上传文件的插件,分享下不够完善请指出共同进步)

这里所讲述的是编辑已成功上传过的图片

//编辑文件上传 插件初始化    通过封装的方式可以 减少很多重复的代码
path 参数是个数组的形式
     [
        "http://lorempixel.com/800/460/nature/1",//图片的地址
        "http://lorempixel.com/800/460/nature/2",
     ]
 
con 参数外层是数组形式,里面则为对象
    [ 
        {caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1},
    ]
 
 
  
function edit_image(path,con){
        $("#upload").fileinput({
             uploadUrl: "upload", //上传到后台处理的方法
             uploadAsync: false, //设置同步,异步 (同步)
             language: 'zh', //设置语言
             overwriteInitial: false, //不覆盖已存在的图片
            //下面几个就是初始化预览图片的配置    
             initialPreviewAsData: true,
             initialPreviewFileType: 'image',
             initialPreview:path , //要显示的图片的路径
             initialPreviewConfig:con
        }); 
}
接下来 通过ajax向后台请求对应的编辑的图片数据组装数组传入到 上面的方法中
就可以在页面上显示了
注:在 ajax中 初始化 fileinput 是配置参数是不起作用的  需要 先销毁,再初始化
销毁fileinput  见官网 http://plugins.krajee.com/file-plugin-methods-demo

  $("#upload").fileinput('destroy');
     //初始化方法 
        edit_image();

相关配置见官网
<a target=_blank href="http://plugins.krajee.com/file-input-ajax-demo/3" target="_blank">点击打开链接</a>

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值