用freemarker做一个完美的图片上传组件

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

然后点击上传完后：

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

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

1、样式问题

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

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

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

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

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

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

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

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

3、代码实例

<style>
.uploadFileAssembly {
    position:relative;
    height:50px;
    width:50px;
    display: inline-block;
    background: #F5F5F5;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    border: 1px solid #bbb;
    background:url("/activitymgr/images/defaultimg.png") no-repeat;
    background-size: 50px 50px;
    vertical-align: middle;
}
.uploadFileAssembly input {
    width:100%;
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    height:100%;
}
</style>
<script src="/js/jquery-1.7.2.min.js"></script>
<script>
    function uploadFile${id}() {
        var formData = new FormData($("#${id}_span form")[0]);
        $.ajax({
             url: '/uploadFile' ,
             type: 'POST',
             data: formData,
             async: false,
             cache: false,
             contentType: false,
             processData: false,
             success: function (data) {
                 var result = data.result;
                 if(result=="success"){
                     var id = data.id;
                     var url = data.url;
                     $("#${id}").val(id);
                     $("#${id}_span").css("background-image","url("+url+")");
                 }else{
                     alert(data.msg);
                 }
             },
             error:function(){
                 alert("上传失败");
             }
         });
    }
    $(function(){
        $("#${id}_span form input").change(function () {
          //如果value不为空，调用文件加载方法
          if($(this).val() != ""){
               uploadFile${id}();
          }
     });
    });
</script>
<span id="${id}_span" class="uploadFileAssembly">
    <form><input type="file" class="uploadFileAssemblyInput" name="filedata" placeholder="输入文件" /></form>
    <input type="hidden" value="" id="${id}" class="uploadFileAssemblyId">
</span>

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

function uploadFile${id}() {
}

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

<div>
第一张图片：
<#assign id = "first">
<#include "/assembly/uploadFile.ftl">
</div>
<div>
第二张图片：
<#assign id = "second">
<#include "/assembly/uploadFile.ftl">
</div>

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

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

这样就打工告成啦。

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