个人随笔
用freemarker做一个完美的图片上传组件
2020-09-11 22:40:22

一个项目中,肯定是需要图片上传功能,但是总不可能每个需要上传图片的地方都写一套js逻辑,写一套获取上传后的图片路径方法,因此我们需要将其抽取成一个ftl,需要上传的地方包含进来即可。如下效果:

然后点击上传完后:

并且很方便的获取上传图片的url或者图片ID。

上面就是需求啦,现在我们来分析下,要实现这种效果需要考虑的问题是啥?

1、样式问题

首先,我们知道,文件上传用的是input标签,但是我们的input标签样式很诡异,如下:

真是丑晕了,并且像我这种css很弱的,感觉怎么调都有问题,所以这是第一个问题,当然对于大神来说,这个是小case啦。

解决方法:用相对定位然后让input的透明度为0,也就是全透明。

2、如何获取上传后的图片问题

如果我们一个页面只有一个地方需要上传,那么当然很简单啦,指定上传主键里的id即可,然后用户使用的时候就直接根据id即可,但是假如一个页面有好多个图片要上传,那么我们怎么获取上传后图片的链接呢,怎么去区分?

解决方法:让用户传过控件ID到组件中,然后组件内部根据用户传过来的ID生产保存上传后返回的链接的input.

  1. <input type="hidden" id="用户传过来的ID">

然后用户上传完图片就直接更具自己定义的ID来获取值啦。

3、代码实例

  1. <style>
  2. .uploadFileAssembly {
  3. position:relative;
  4. height:50px;
  5. width:50px;
  6. display: inline-block;
  7. background: #F5F5F5;
  8. border-radius: 4px;
  9. overflow: hidden;
  10. text-decoration: none;
  11. text-indent: 0;
  12. border: 1px solid #bbb;
  13. background:url("/activitymgr/images/defaultimg.png") no-repeat;
  14. background-size: 50px 50px;
  15. vertical-align: middle;
  16. }
  17. .uploadFileAssembly input {
  18. width:100%;
  19. position: absolute;
  20. font-size: 100px;
  21. right: 0;
  22. top: 0;
  23. opacity: 0;
  24. height:100%;
  25. }
  26. </style>
  27. <script src="/js/jquery-1.7.2.min.js"></script>
  28. <script>
  29. function uploadFile${id}() {
  30. var formData = new FormData($("#${id}_span form")[0]);
  31. $.ajax({
  32. url: '/uploadFile' ,
  33. type: 'POST',
  34. data: formData,
  35. async: false,
  36. cache: false,
  37. contentType: false,
  38. processData: false,
  39. success: function (data) {
  40. var result = data.result;
  41. if(result=="success"){
  42. var id = data.id;
  43. var url = data.url;
  44. $("#${id}").val(id);
  45. $("#${id}_span").css("background-image","url("+url+")");
  46. }else{
  47. alert(data.msg);
  48. }
  49. },
  50. error:function(){
  51. alert("上传失败");
  52. }
  53. });
  54. }
  55. $(function(){
  56. $("#${id}_span form input").change(function () {
  57. //如果value不为空,调用文件加载方法
  58. if($(this).val() != ""){
  59. uploadFile${id}();
  60. }
  61. });
  62. });
  63. </script>
  64. <span id="${id}_span" class="uploadFileAssembly">
  65. <form><input type="file" class="uploadFileAssemblyInput" name="filedata" placeholder="输入文件" /></form>
  66. <input type="hidden" value="" id="${id}" class="uploadFileAssemblyId">
  67. </span>

上面最重要的是${id},这个id不仅把每个组件区分独立开来了,而且方法也独立开来了,不会互相混乱冲突,完全是属于控件自己。

  1. function uploadFile${id}() {
  2. }

然后我们怎么使用该组件呢,代码如下:

  1. <div>
  2. 第一张图片:
  3. <#assign id = "first">
  4. <#include "/assembly/uploadFile.ftl">
  5. </div>
  6. <div>
  7. 第二张图片:
  8. <#assign id = "second">
  9. <#include "/assembly/uploadFile.ftl">
  10. </div>

这样就可以了,跟博文开头的样式一样。
用户上传完图片后想要获取上传的值就直接:

  1. var img1 = $("#first").val();
  2. var img2 = $("#second").val();

这样就打工告成啦。

备注:
上面的上传图片的ajax方法只是我这边的实现方法,每个用户都有自己的实现,主要关注样式和js实现以及怎么传id即可。

 5
有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2