TP5多图上传，Jq上传图片加预览

保存图片的方法
public function savemoreimg(){
        $request = $this->request;
        if ($request->isPost())
        {
            //接受jq ajax传递的base64数据
            $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 .=$img_path.",";
                        }else{
                            return ['st'=>1,'msg'=>'上传失败，请重试'];
                        }
                    }else{
                        //文件类型错误
                        return ['st'=>1,'msg'=>'文件类型错误'];
                    }
                }
            }
            return ['st'=>0,'error'=>$error,'imgurl'=>$imgurl];
        }
    }
//js
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();
    //input框存放的图片url 字符串
    let input_img=new Array();
    $("#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});
            }
        });
    })
//html
 <tr>
                <td><span class="form-required">*</span>上传更多图片</td>
                <td>
                    <div style="width: 100%;height: 130px;">
                        <input type="hidden" id="pic_urls" name="pic_urls">
                        <div style="width: 100%;height: 130px" id="moreimg">

                        </div>
                        <span  class="inputpost" id="more_img_put">上传图片</span>
                        <input class="inputfile" type="file" multiple id="morefile" value="more_get_img" accept="image/*">

                    </div>
                </td>
            </tr>