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

梦里梦外; 2022-05-24 01:37 187阅读 0赞

https://blog.csdn.net/sinat\_33750162/article/details/51497563

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

\[javascript\]  [view plain][]   [copy][view plain]

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][view plain]

1.  con 参数外层是数组形式，里面则为对象  
2.      \[   
3.          \{caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1\},  
4.      \]

![Center][]

\[plain\]  [view plain][]   [copy][view plain]

1.  function edit\_image(path,con)\{  
2.          $("\#upload").fileinput(\{  
3.               uploadUrl: "upload", //上传到后台处理的方法  
4.               uploadAsync: false, //设置同步，异步 （同步）  
5.               language: 'zh', //设置语言  
6.               overwriteInitial: false, //不覆盖已存在的图片  
7.              //下面几个就是初始化预览图片的配置      
8.               initialPreviewAsData: true,  
9.               initialPreviewFileType: 'image',  
10.              initialPreview:path , //要显示的图片的路径  
11.              initialPreviewConfig:con  
12.         \});   
13. \}

\[html\]  [view plain][]   [copy][view plain]

1.  接下来 通过ajax向后台请求对应的编辑的图片数据组装数组传入到 上面的方法中  
2.  就可以在页面上显示了  
3.  注：在 ajax中 初始化 fileinput 是配置参数是不起作用的  需要 先销毁，再初始化  
4.  销毁fileinput  见官网 http://plugins.krajee.com/file-plugin-methods-demo  
5.    
6.    $("\#upload").fileinput('destroy');  
7.       //初始化方法   
8.          edit\_image();  
9.    
10. 相关配置见官网  
11. **<****a** target=\_blank href="http://plugins.krajee.com/file-input-ajax-demo/3" target="\_blank"**>**点击打开链接**</****a****>**

[view plain]: https://blog.csdn.net/sinat_33750162/article/details/51497563#
[Center]: /images/20220524/a46325f9613f4232aa833c91365b6ef8.png