thinkphp 使用webuploader 回显图片，生成缩略图，多图片上传 2

上一篇说了webuploader图片上传，这篇说回显,读取数据库中的图片路径并显示

回显图片的前提是拿到后台的图片上传路径，

        var imgs=new Array();
        uploader.on('uploadSuccess', function(file, response) {
            imgs.push(response.data);
        });

response就是后台传回的json数据，

读取数据库中的图片路径并显示的解决方法是用layer打开多一个窗口

function picture_add(title,url){
	var index = layer.open({
		type: 2,
		title: title,
        area: ['700px', '530px'],
        fix: false, //不固定
        maxmin: true,
		content: url
	});
	
}

function uploadCallback(imgs){
    $.each(imgs,function(index,value){
        $(".callback_img").attr('src',value);
        $('#callback_img').val(value) 
        // var dom = "<img with='100' height='100' src='\\"+value+"'/>"
        // $(".select_img").prepend(dom);
    });
    $(".callback_img").show()
}

然后在新开的窗口调用父窗体函数

                        window.parent.uploadCallback(imgs)
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);      

这就可以解决读取数据库图片路径问题

多图上传就是把多张图片路径放到数组imgs里然后回调给父窗体，还有就是有多少张图片就有多少个json数据返回，解决方案是在setState方法里的case 'finish':里调用

                        window.parent.uploadCallback(imgs)
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);

生成缩略图就用thinkphp自带的图片处理函数就行 了

来源：CSDN

作者：lmp5023

链接：https://blog.csdn.net/lmp5023/article/details/104633134