jQuery多图上传插件imgUp.js

开发环境：idea  mysql

效果：

前台步骤如下：

    1）首先导入imgPlugin.js

        注：实际项目中使用的时候只需要引用:imgPlugin.js这个就可以了，因为这个是对  imgUp.js的封装

       

<script type="text/javascript" src="../style-wechat/js/imgPlugin.js"></script>

   2)在页面中加入它需要的js 

   

<script type="text/javascript">    var imgUrls="";    $("#file").takungaeImgup({        formData: {            "name": "file"        },        url: "http://192.168.1.109:8080/imgUp",        success: function(data) {          imgUrls+=data.url+",";        },        error: function(err) {            alert(err);        }    });       function addComm(){                   jQuery.ajax({                    url: "/addComment.action",                    type: 'POST',                    data: {'imageUrls': imgUrls},                    dataType: 'json',                    success: function (data) {                       alert("发布成功");                    }                })    }</script>

  3）在页面中代码添加内容
  

<div class="img-box full" style="height: 140px">    <section class=" img-section">        <div class="z_photo upimg-div clear" >            <section class="z_file fl">                <img src="../../style-wechat/images/a11.png" class="add-img">                <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />            </section>        </div>    </section></div><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>

后台接受图片代码：