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"}
下面是源码附件: