jQuery多图上传插件imgUp.js

最新推荐文章于 2024-03-29 01:45:05 发布

原创最新推荐文章于 2024-03-29 01:45:05 发布 · 9.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件 #图片上传 #idea #imgPlugin

jquery 专栏收录该内容

3 篇文章

订阅专栏

开发环境：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>

后台接受图片代码：