ajax上传图片

// PHP
// 保存到本地版本
        $coun = 0;
        $acc = $data["acc_no"];
        $imgArr = [];
        $flag = true;
        foreach($data as $k => $v) {
            if ("imgFileStr". $coun == $k) {
                $imgFileStr = substr($v, strpos($v, ",") + 1);
                $image = str_replace(",", "//", $imgFileStr);
                $filename = $acc . "_" . date('YmdHis') . $coun . '.jpg';
                // 图片存放地址
                $imgPath = "./upload/" . $filename;
                $res = file_put_contents($imgPath, base64_decode($image));
                // 上传失败一张，直接返回
                if (!$res) {
                    wrtLog('upload img fail', $coun);
                    $flag = false;
                    break;
                }
                array_push($imgArr, $filename); 
            }
            $coun++;
        }
        if(!$flag) {
            return $flag;
        }
        return json_encode($imgArr);


        $imgFileStr = substr($imgFileStr, strpos($imgFileStr, ",") + 1);
        
        $image = str_replace(",", "//", $imgFileStr);
        // 图片存放地址
        $filename = "./upload/" . date('YmdHis').'.jpg';
        $res = file_put_contents($filename, base64_decode($image));
        var_dump($res);
        // 入库 TODO

// html
<span class="imgBox" name="uploadimg"></span>
<span class="comcss uploadimg" name="uploadimg"></span>
<span class="file"><strong>+<strong>
       <input type="file" onchange="util.changeImg()" multiple="multiple" id="fileUpload" class="photo">
</span>
<button onclick="util.uploadImg()">上传</button>

let imgCount = 0
util.changeImg = function() {
    let countFiles = $('#fileUpload')[0].files.length;
    if (countFiles > 5) {
        base.showMsg("最多只能上传5张凭证", 3000)
        return
    }
    let imgPath =  $('#fileUpload')[0].files[0].name;
    let ext = imgPath.substring(imgPath.lastIndexOf('.')+1).toLowerCase();
    let imageHolder = $('.uploadimg');
    let imageHolderBox = $('.box');
    if(ext == 'jpg' || ext == 'png' || ext =='jpeg' || ext == 'gif'){
        for (let i = 0; i < countFiles; i++) {
            let reader = new FileReader();
            reader.readAsDataURL($('#fileUpload')[0].files[i])
            reader.onload = function (ev) {
                console.log(ev);
                let imgfile = "<span class='comcss thumbImage"+imgCount+"' name='thumbImage"+imgCount+"'><img src='"+ ev.target.result +"'><spanc class='delthumbImage delthumbImage"+imgCount+"' onclick='util.delImg("+imgCount+")'>-</span></span>"
                $('.imgBox').append(imgfile)
                // $('<img>',{
                //     'src':ev.target.result,
                //     'name':'thumbImage' + imgCount,
                //     'class':'thumbImage'
                // }).appendTo(imageHolder),
            };
            imageHolder.show();
            imgCount++
            if (imgCount > 4) {
                $(".file").css('display','none');
                
            }
        }
    }
}

util.uploadImg = function() {
    let form = new FormData();
    var arrUl = $(".imgBox > .comcss");
    $.each(arrUl, function(){
        console.log($(this).find("img").attr("src"));
        let file = $(this).find("img").attr("src")
        let imgFile = file.split('//');
        form.append('imgFileStr',imgFile);
    })
    $.ajax({
        url: '/admin/profile/uploadESignatureImg',
        type:'post',
        data: form,
        processData: false,
        contentType: false,
        dataType: 'json',
        success:function (res) {
            console.log(res);
        }
    })
}

标签：res,imgPath,filename,ajax,let,coun,上传,imgFileStr,图片
来源： https://www.cnblogs.com/Essaycode/p/14502917.html