base64编码上传头像实例

点击图片

<img id="myavatar" data-toggle="modal" data-target="#avatar-modal" title="修改头像" src=".."  onerror="this.src='/statics/images/nophoto.gif'">

弹出模态框

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
            <form class="avatar-form">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                            <button class="btn btn-danger"  type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
                            <span id="avatar-name"></span>
                            <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                                <!--<div class="avatar-preview preview-md"></div>
                        <div class="avatar-preview preview-sm"></div>-->
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
                                </div>
                            </div>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                                </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
                                  <!--<span class="fa fa-search-plus"></span>-->
                                </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
                                  <!--<span class="fa fa-search-minus"></span>-->
                                </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214"></span>
                                </button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JS代码

<script type="text/javascript">
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function(e) {
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if(Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            $(".avatar-wrapper").children().remove;
            return false;
        }
        if(!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#avatarInput").value;
            var teststr = texts;
            testend = teststr.match(/[^\\]+\.[^\(]+/i);
            filename.innerHTML = testend;
        }
    });

    $(".avatar-save").on("click", function() {
        //var img_lg = document.getElementById('imageHead');
        // 截图小的显示框内的内容
        var targetDom = $("#imageHead");
        var copyDom = targetDom.clone();
        copyDom.width(targetDom.width() + "px");
        copyDom.height(targetDom.height() + "px");
        $('body').append(copyDom);

        html2canvas(copyDom, {
            allowTaint: true,
            taintTest: false,
            onrendered: function(canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL("image/jpeg");
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                imagesAjax(dataUrl)
            }
        });
    });

    function imagesAjax(dataUrl) {
        $.ajax({
            url: "account_manage_avatar.html",
            data: dataUrl,
            type: 'POST',
            dataType: 'json',
            success: function(res) {
                var json = eval(res);
                $("#myavatar").attr("src",json.data);
            }
        });
    }
</script>

PHP代码

$data = file_get_contents("php://input");
//处理base64传送过来的数据
$img = str_replace('data:image/jpeg;base64,', '', $data);
$img = str_replace(' ', '+', $img);

//验证图片大小
$str_leng = strlen($img);
$image_size = ($str_leng - ($str_leng / 8) * 2);
if ((number_format($image_size / 1024, 2)) > 1024) {
    showmessage('图片过大', HTTP_REFERER);
}

$img = base64_decode($img);

//验证图片是否是base64编码
if (base64_encode($img) == true) {
    $file_name = date() . time() . '.jpg';
    $file = 'uploadfile/member/avatar';
    if (!file_exists($file)) {
        mkdir($file, 0777, true);
    }
    $file = 'uploadfile/member/avatar/' . $file_name;
    $res = file_put_contents($file, $img);

    $avatar_url = "/uploadfile/avatar/" . $file_name;
    $this->db->update(array('avatar' => $avatar_url), array('userid' => $this->memberinfo['userid']));
    if ($res) {
        echo json_encode(array('code' => 1, 'data' => $file));
    } else {
        echo json_encode(array('code' => 0, 'msg' => 'error,头像上传失败!'));
    }
}