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);
        }
    })
}

  

原文地址:https://www.cnblogs.com/Essaycode/p/14502917.html