base64編碼上傳頭像例項
阿新 • • 發佈:2018-12-02
點選圖片
<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">×</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("setDragMode", "move")">
</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("zoom", 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("zoom", -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("reset")" 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,頭像上傳失敗!'));
}
}