TP5多图上传，Jq多图片上传加预览,提示信息框使用的layer

<?php
public function savemoreimg(){
	$request = $this->request;
	if ($request->isPost())
	{
		$param = $request->post('file/a');
		if(!is_array($param))
		{
			return  ['st'=>1,'msg'=>'图片上传失败'];
		}
		$up_dir = 'upload'.DS.'sgxt'.DS.date('Ymd',time()).DS;//存放在当前目录的upload文件夹下
		mkdirs($up_dir);
		$imgurl="";
		$error=0;
		foreach ($param as $k=>$v)
		{
			$base64_img = trim($v);
			if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
				$type = $result[2];
				if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){
					$new_file = $up_dir.time().'.'.$type;
					if(file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))){
						$img_path = str_replace('../../..','', $new_file);
						$imgurl .=DS.$img_path.",";
					}else{
						return ['st'=>1,'msg'=>'上传失败，请重试'];
					}
				}else{
					//文件类型错误
					return ['st'=>1,'msg'=>'文件类型错误'];
				}
			}
		}
		return ['st'=>0,'error'=>$error,'imgurl'=> substr($imgurl,0,strlen($imgurl)-1)];
	}
} 
?>
<--html:-->	
				<!--存放路径的-->
				<input type="hidden" id="pic_urls" name="pic_urls" />
				<!--显示图片的-->
                <div style="width: auto;float:left;max-height: 130px" id="moreimg">

                </div>
				<!--选择图片按钮-->
                <input class="inputfile" type="file" multiple id="morefile" value="more_get_img" accept="image/*">
				<!--上传图片按钮-->
                <span  class="inputpost" id="more_img_put">上传图片</span>
<--css:-->
<style>
.mainimg {
    width: 130px;
    height: 130px;
    position: relative;
    float: left;
    margin: 5px;
}
.mainimg .div_img_close {
    position: absolute;
    right: 2px;
    z-index: 99999;
    font-size: 20px;
    color: #3498db;
    top: 2px;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 17px;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
}
.inputpost {
    display: block;
    float: left;
    width: 100px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #2288cc;
    color: #fff;
    cursor: pointer;
}
</style>
<--js:-->
<script>
   function getObjectURL(file) {
        let url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function getBase64Image(img) {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        let dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }
//    多图上传
    let mopic=new Array();
    let input_img=new Array();
    let neijing ="";
    if(neijing.length>=2)
    {
        let result=neijing.split(",");
        mopic=result;
        for(let n=0;n<result.length;n++){
            let divimg ="<div class='mainimg'><img  src='"+result[n]+"' class='divimg'/><span class='div_img_close' data-id='"+n+"'>x</span></div>";
            $('#moreimg').append(divimg);
        }
    }
    $("#morefile").on("change",function(){
        let divimg="";
        for (let j=0;j<this.files.length;j++)
        {
            let objUrl = getObjectURL(this.files[j]) ; //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl){
                let image = new Image();
                image.src = objUrl;
                image.onload = function(){
                    let base64 = getBase64Image(image);
                    // console.log(base64);
                    mopic.push(base64);
                    let mopic_len=mopic.length-1;
                    // console.log(mopic_len);
                    divimg ="<div class='mainimg'><img src='"+base64+"' class='divimg'/><span class='div_img_close' data-id='"+mopic_len+"'>x</span></div>";
                    $('#moreimg').append(divimg);
                };
            }
        }
    });
    $("#moreimg").on("click",".div_img_close",function(){
        let id= $(this).attr('data-id');
        console.log(mopic);
        if(isNaN(id)||id>=mopic.length){
            return false;
        }
        for(let i=0,n=0;i<mopic.length;i++){
            if(mopic[i]!==mopic[id]){
                mopic[n++]=mopic[i];
            }
        }
        mopic.length-=1;
        $("#moreimg .mainimg").remove();
        $("#pic_urls").val(mopic.join(','));
        $(this).parent().remove();
        for (let m=0;m<mopic.length;m++)
        {
            let divimg ="<div class='mainimg'><img src='"+mopic[m]+"' class='divimg'/><span class='div_img_close' data-id='"+m+"'>x</span></div>";
            $('#moreimg').append(divimg);
        }

        //input框内容 改变
        if(isNaN(id)||id>=input_img.length){
            return false;
        }
        for(let i=0,n=0;i<input_img.length;i++){
            if(input_img[i]!==input_img[id]){
                input_img[n++]=input_img[i];
            }
        }
        input_img.length-=1;
        $("#pic_urls").val(input_img.join(','));
    });
    //进行上传
    let check=true;
    $('#more_img_put').click(function () {
        if(mopic.length<1)
        {
            layer.msg('请先选择图片,在进行上传！');
            return false;
        }
        if(!check)
        {
            layer.msg('正在进行上传，请勿重复点击!', {icon: 5});
            return false;
        }
        check=false;
        $.ajax({
            url: "/admin/Store/savemoreimg",
            type: "POST",
            dataType: 'json',
            data: {'file':mopic},
            success: function (data) {
                if(parseInt(data.st)==0)
                {
                    check=true;
                    let val=$('#pic_urls').val();
                    if(val.length>5)
                    {
                        $("#pic_urls").val( $("#pic_urls").val()+","+data.imgurl);
                    }else{
                        $("#pic_urls").val(data.imgurl);
                    }
                    let arr = data.imgurl.split(',');
                    for (let o=0;o<arr.length;o++)
                    {
                        input_img.push(arr[o]);
                    }
                    layer.msg('上传成功!', {icon: 6});
                }else{
                    check=true;
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function () {
                check=true;
                layer.msg('上传失败，请重试...', {icon: 5});
            }
        });
    })
</script>