您的位置: 首页  >  文章  >  bootstrap-fileinput 的ajax动态初始化图片

bootstrap-fileinput 的ajax动态初始化图片

分类: 文章 • 2025-01-31 18:05:52

https://blog.****.net/sinat_33750162/article/details/51497563

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

[javascript] view plain copy
  1. //编辑文件上传 插件初始化    通过封装的方式可以 减少很多重复的代码  
  2. path 参数是个数组的形式  
  3.      [  
  4.         "http://lorempixel.com/800/460/nature/1",//图片的地址  
  5.         "http://lorempixel.com/800/460/nature/2",  
  6.      ]  





[plain] view plain copy







    

  1. con 参数外层是数组形式，里面则为对象  
    2. 

  2.     [   
    3. 

  3.         {caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1},  
    4. 

  4.     ]  
    5. 








bootstrap-fileinput 的ajax动态初始化图片 



[plain] view plain copy







    

  1. function edit_image(path,con){  
    2. 

  2.         $("#upload").fileinput({  
    3. 

  3.              uploadUrl: "upload", //上传到后台处理的方法  
    4. 

  4.              uploadAsync: false, //设置同步，异步 （同步）  
    5. 

  5.              language: 'zh', //设置语言  
    6. 

  6.              overwriteInitial: false, //不覆盖已存在的图片  
    7. 

  7.             //下面几个就是初始化预览图片的配置      
    8. 

  8.              initialPreviewAsData: true,  
    9. 

  9.              initialPreviewFileType: 'image',  
    10. 

  10.              initialPreview:path , //要显示的图片的路径  
    11. 

  11.              initialPreviewConfig:con  
    12. 

  12.         });   
    13. 

  13. }  
    14. 








[html] view plain copy







    

  1. 接下来 通过ajax向后台请求对应的编辑的图片数据组装数组传入到 上面的方法中  
    2. 

  2. 就可以在页面上显示了  
    3. 

  3. 注：在 ajax中 初始化 fileinput 是配置参数是不起作用的  需要 先销毁，再初始化  
    4. 

  4. 销毁fileinput  见官网 http://plugins.krajee.com/file-plugin-methods-demo  
    5. 

  5.   
    6. 

  6.   $("#upload").fileinput('destroy');  
    7. 

  7.      //初始化方法   
    8. 

  8.         edit_image();  
    9. 

  9.   
    10. 

  10. 相关配置见官网  
    11. 

  11. <a target=_blank href="http://plugins.krajee.com/file-input-ajax-demo/3" target="_blank">点击打开链接</a>  
    12. 





															

																					

								

									相关推荐