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>

后台接受图片代码：