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