好用,这款jquery的ajax上传图片的插件好评,附件附上源码

image.png

html部分和引入css:

<link href="/static/com/ajax-image-upload/src/css/jquery.upload.min.css" type="text/css" rel="stylesheet" />
<input type="hidden" name="images_list">
<div class="upload-box clear">
    <p class="upload-tip">最多上传10张图片(包含已上传的),每个图片不能超过2M,向前追加图片,只允许上传png/jpeg/jpg格式图片,重复上传只算一张</p>
    <div class="image-box1"></div>
</div>


js部分:

<script src="/static/com/ajax-image-upload/src/js/jquery.upload.min.js"></script>
<script>
    let images =  []
    let dataImgs = "<{$data.images_list??''}>";//后端数据(mvc的)


    $(function() {
        if (dataImgs){
            images = dataImgs.split(",")//初始化图片列表,后端返回了用逗号分开的数据
        }
        $(".image-box1").ajaxImageUpload({
            fileInput : 'images',
            postUrl : "<{:url('/马赛克/image')}>", //上传的服务器地址
            width : 180,
            height : 180,
            postData : { 'fileKey' : 'images' , 'from' :'picture'},
            imageUrl:images? images: [],//已有图片列表
            maxNum : 10, //允许上传图片数量
            allowZoom : true, //允许放大
            allowType : ['png','jpg','jpeg'], //允许上传图片的类型
            maxSize : 2, //允许上传图片的最大尺寸,单位M
            appendMethod : 'before',
            before: function () {
                console.log('上传前回调函数1')
            },
            success : function(json){
                console.log('上传成功回调函数1',json)
            },
            complete : function () {

                console.log('全部上传成功回调函数1');
                $("section.ggy-image-section").each(function() {
                    var src = $(this).find("img.ggy-image-show").attr("src");

                    images.push(src)
                    images = Array.from(new Set(images));
                    // console.log(images);
                });
            },
            delete : function (src) {
                console.log('删除时回调函数1,要删除的文件路径:' + src);
                images = $.grep(images, function(item) {
                    return item !== src;
                });

                // console.log(images);
            },
            error : function (e) {
                console.log('上传失败',e.msg + '(' + e.code + ')');
            }
        });
    });
</script>


php后端返回(200=成功,其他是失败,要msg提示):

{"code":200,"msg":"success","src":"http://暴富.cn/07a2f0fa3ece41c37aeb1ec6206e1a71.jpeg"}


下面是源码附件:

ajax-image-upload.zip


评论/留言