当前位置:首页 » 《关注互联网》 » 正文

解决:前端bootstrap的fileInput插件

2 人参与  2024年09月29日 11:20  分类 : 《关注互联网》  评论

点击全文阅读


项目场景:

帮朋友做一个后台管理系统遇到文件上传回显异常的问题。

项目是单体架构,没有前后端分离,前端使用的bootstrap3+Thymeleaf。上传插件用的是fileInput。

问题描述:

上传没有问题,完成后点击编辑再次进入无法预览,通过网上查询fileInput回显预览相关问题后,尝试了很多其他开发者提供办法都无法成功。

问题解决:

最终再bootstrap中文网找到了fileinput插件的相关文档,其中提供了一种最基本的初始数据预览方式。如果使用的是fileInput插件,以下代码直接可以使用并查看效果:

  <input id="input" name="input[]" type="file" multiple class="file-loading">  <script>      $("#input").fileinput({          uploadUrl: "/file-upload-batch/1",          uploadAsync: false,          minFileCount: 2,          maxFileCount: 5,          overwriteInitial: false,          initialPreview: [              // 图像数据              "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",              // 图像数据              "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg",              // 视频数据              "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",              // PDF数据              'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',              // 文本数据              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",              // HTML数据              '<div class="text-center">' +               '<h3>Lorem Ipsum</h3>' +               '<p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>' +               '<h5><small>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</small></h5>' +               '<hr>' +               '</div>' +               '<div class="text-justify">' +               '<p>' +               'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis convallis dolor sed dignissim. Phasellus euismod mauris vel dolor maximus, sed fermentum mauris lobortis. Aliquam luctus, diam in luctus egestas, magna lacus luctus libero, scelerisque mattis ante dolor ac nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse varius orci ultricies massa euismod, at semper turpis fermentum. Quisque vitae augue vel lectus viverra facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacinia molestie diam, et volutpat nunc bibendum a. Cras a est sed augue commodo accumsan quis vitae nisi.' +               '</p>' +               '<p>' +               'Nunc sit amet metus et dui aliquet feugiat. Praesent lobortis, ipsum et elementum dignissim, urna libero fringilla justo, at tincidunt nisi mi sed mi. Integer vel est porttitor, tempor tortor non, lobortis felis. Curabitur porttitor nisi et volutpat iaculis. Fusce nec feugiat lectus, vitae ullamcorper lorem. Ut ultrices nunc imperdiet placerat malesuada. Proin commodo erat in egestas maximus.' +               '</p>'          ],          initialPreviewAsData: true, // 确定你是否仅发送预览数据,而不是原始标记          initialPreviewFileType: 'image', // `image`是默认值,可以在下面的配置中覆盖          initialPreviewConfig: [              {caption: "Desert.jpg", size: 827000, width: "120px", url: "/file-upload-batch/2", key: 1},              {caption: "Lighthouse.jpg", size: 549000, width: "120px", url: "/file-upload-batch/2", key: 2},               {type: "video", size: 375000, filetype: "video/mp4", caption: "KrajeeSample.mp4", url: "/file-upload-batch/2", key: 3},               {type: "pdf", size: 8000, caption: "About.pdf", url: "/file-upload-batch/2", key: 4},              {type: "text", size: 1430, caption: "LoremIpsum.txt", url: "/file-upload-batch/2", key: 5},               {type: "html", size: 3550, caption: "LoremIpsum.html", url: "/file-upload-batch/2", key: 6}          ],          purifyHtml: true, // 这是默认情况下为预览净化HTML数据          uploadExtraData: {              img_key: "1000",              img_keywords: "happy, places",          }      }).on('filesorted', function(e, params) {          console.log('File sorted params', params);      }).on('fileuploaded', function(e, params) {          console.log('File uploaded params', params);      });  </script>

实际效果如下:

初步展示效果完成,测试Demo无其他问题,后面只需要调整和封装相关代码即可。

除基本预览还支持高级预览等,因项目没有过多要求,目前满足实际需求即可,没有过多浏览相关内容。如有需要自行查阅,附bootstrap-fileinput中文网地址:

bootstrap-fileinput中文网|样例代码


点击全文阅读


本文链接:http://zhangshiyu.com/post/166089.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(全书)往梦难复温(沈淮霆宋思予+番外+全书)_(往梦难复温+番外+全书)免费_笔趣阁(沈淮霆宋思予)
  • 江晚烟陆聿我终于失去了你结局+番外(江晚烟陆聿)列表_江晚烟陆聿我终于失去了你结局+番外(江晚烟陆聿)结局篇+番外在线
  • 沈静怡傅励行+后续+结局(傅励行沈静怡)列表_沈静怡傅励行+后续+结局(傅励行沈静怡)沈静怡傅励行+后续+结局在线
  • 非典时,我被妻子的白月光误诊遗弃在病房节选角色羁绊特辑‌_田越苏雅白月光角色专属支线试读入口
  • 往梦难复温沈淮霆宋思予_往梦难复温沈淮霆宋思予
  • 霜天空巷旧人归后续更新戚南枝霍涧山完本_霜天空巷旧人归后续更新(戚南枝霍涧山)
  • 傅景深沈晚栀(沈晚栀傅景深+后续+结局)结局_(傅景深沈晚栀沈晚栀傅景深+后续+结局全书结局)结局列表_笔趣阁(傅景深沈晚栀)
  • 霜天空巷旧人归全书+后续+结局(戚南枝霍涧山)列表_霜天空巷旧人归(戚南枝霍涧山)霜天空巷旧人归全书+后续+结局在线
  • (番外)+(结局)江晚烟陆聿我终于失去了你全书+后续(江晚烟陆聿)免费_(江晚烟陆聿我终于失去了你全书+后续)列表_笔趣阁(江晚烟陆聿)
  • 谢长乐肖风行兰因絮果,爱恨全如玉碎全书+结局+番外列表_笔趣阁(兰因絮果,爱恨全如玉碎谢长乐肖风行全书+结局+番外)
  • 「爱恨随风,六十五岁的我离婚了」大结局_「李明小孙女婆婆」小说章节试读
  • 长恨歌新鲜出炉(宋可卿谢景御)_长恨歌新鲜出炉

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1