多张图片上传插件

多张图片上传

最近开发一个项目之前一直没有接触过这块的内容，百度谷歌的很多比较适合项目的选了一种大致效果如下图所示：

类似与微信qq说说的上传图片

前端代码
1.上传页面 add.ftl

<#include "/views/commons/pageContentPre.ftl"/>
<form id="medicalUnionForm" action="/medicalunion/upload" method="POST" class="form-horizontal" role="form"
      enctype="multipart/form-data">

    <section class=" img-section">
        <p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片</span></p>
        <div class="z_photo upimg-div clear" >

            <section class="z_file fl">
                <img src="/statics/image/add.png" class="add-img">
                <input type="file" name="file" id="file"  multiple="multiple" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  />
            </section>
        </div>
    </section>

    <aside class="mask works-mask">
        <div class="mask-content">
            <p class="del-p">您确定要删除当前图片吗？</p>
            <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
        </div>
    </aside>


    <input type="submit" value="提交">

</form>

<#include "/views/commons/pageContentPost.ftl"/>


<script type="text/javascript">
// 注意：此处因为是我们公司自己的框架，不便粘贴太多代码，此处load的作用 相当于下面的<link>和<script> 引入相关js 和css样式
    load(["commoncss","uploadcss","jqmin", "uploadjs"], function () {
    });
</script>

等同于上述load 功能

<link href="css/common.css" type="text/css" rel="stylesheet"/>
        <link href="css/index.css" type="text/css" rel="stylesheet"/>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/imgUp.js"></script>

2.修改页面，获取图片。
修改页面比添加的稍微复杂点，需要动态获取之前已上传的图片，另外还要可以动态添加和删除在dosubmit()方法中通过获取img标签的class属性来获取 src值，然后处理后复制给隐藏 的input，代表之前上传图片的变化情况，而新上传的则正常在后台重新上传处理。

     <form id="medicalUnionForm" action="/medicalunion/edit" method="POST" class="form-horizontal" role="form"
              enctype="multipart/form-data">
  <div class="row">
                <div class="form-group">
                    <div class="col-md-8">
                        <label class="col-sm-4 control-label">认证资料</label>
                        <div class="col-sm-8">

                            <section class=" img-section">
                                <p class="up-p">认证资料图片：<span class="up-span">最多可以上传5张图片</span></p>
                                <div id="imagesId" class="z_photo upimg-div clear" >

                                    <section class="z_file fl">
                                        <img src="/statics/image/add.png" class="add-img">
                                        <input type="file" name="file"  style="width: 100px;height: 100px" id="file"  multiple="multiple" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  />
                                    </section>
                                </div>
                            </section>


                            <aside class="mask works-mask">
                                <div class="mask-content">
                                    <p class="del-p">您确定要删除当前图片吗？</p>
                                    <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                                </div>
                            </aside>

                        </div>

                    </div>
                </div>
            </div>
        <#--认证URL-->
            <input class="form-control" id="identificationUrlId" type="hidden" name="identificationUrl" value="${medicalUnionVO.identificationUrl}">

            <div class="form-group">
                <div class="col-md-8">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-3">
                        <input id="validateBtn" type="button" onclick="dosubmit();" class="btn blue" value="保存"/>
                    </div>
                </div>
            </div>

        </form>

<script type="text/javascript">



    load(["commoncss","uploadcss","jqmin", "uploadjs"], function () {


    });


    $GF.push(function () {
        $(document).ready(function () {
            flush();
        });

    });

    function flush() {
        var html = '';
        var iamgesrcs = $("#identificationUrlId").val();

        var srcs = iamgesrcs.split(';');
        for (var i = 0; i < srcs.length - 1; i++) {

            html+='<section class="up-section fl">'

            html+='<span class="up-span"></span>'
            html+= '<img class="close-upimg" src="/statics/image/del.png">'
            html+= '<img class="up-img" src="公司服务url'+  srcs[i] +'">'
            html+= '<p class="img-name-p">33.jpg</p><input id="taglocation" name="taglocation" value="" type="hidden">'
            html+= '<input id="tags" name="tags" value="" type="hidden">'
            html+= '</section>'

        }

        $("#imagesId").prepend(html);
    }


    function dosubmit() {
        //kanoid
        var identifiUrls ='' ;
        $("img").each(function() {
            if($(this).attr("class") == "up-img") {
               var url =  $(this).attr("src");
                var indexNum = url.indexOf("公司服务url");
                if (indexNum != -1){
                    var v1 = url.replace("公司服务url","");
                    var v2 = v1.split("?")[0];
                    identifiUrls += v2 + ";";
                }
            }
        });

          $("#identificationUrlId").val(identifiUrls);

        $("#medicalUnionForm").submit();
    }


</script>

后台springmvc代码处理图片上传

这里说明下：我这里没有具体存储图片入库的过程，只是提供一个图片输入流调用kanoFileService接口上传图片，具体怎么处理的不作说明，接口会返回一个ID指代某个图片。要强调的是**@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles** ，此处**value="file"** fiel指代的是前端代码中**input** 的**name="file"**，**required = false** 代表不是必须的，我的业务中可以不上传图片所以设置了此项。**file.getOriginalFilename()**可以获取图片的名称。

@RequestMapping(value = "add", method = RequestMethod.POST)
public String add(MedicalUnionVO medicalUnionVO,
 @RequestParam(value = "file", required = false) MultipartFile[] multipartFiles) throws IOException {

 List<String> kanoIdList = new ArrayList<>();
  if (multipartFiles != null) {
   for (MultipartFile file : multipartFiles) {
      if (file != null && StringUtils.isNotBlank(file.getOriginalFilename())) {
     try {
   Response<UploadResult> uploadResultResponse = kanoFileService                       .uploadFile(file.getOriginalFilename(), KANO_BIZ_CODE, file.getInputStream());
   if (uploadResultResponse.isSuccess()) {             kanoIdList.add(uploadResultResponse.getData().getKanoFileId());
    } else {
   LOGGER.warn("上传图片失败：上传文件：{}，返回：{}", file.getOriginalFilename());
    }
} catch (IOException e) {
LOGGER.error("上传图片异常：上传文件：{}，返回：{}", file.getOriginalFilename(), e);
}
 }
 }
}
        return kanoIdList;
}

注意点：

1.前端

form表单的 ：enctype="multipart/form-data" 属性不要忘了
<input type="file"  multiple="multiple" />

2.后端 springMVC

@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles

插件下载地址： http://download.csdn.net/detail/java_huilong/9859115