|
 |
| |
สอบถามเรื่อง UPDATE รูปภาพแล้ว ข้อมูลและภาพเข้าได้สมบูรณ์ แต่ค้างที่หน้าเดิม ไม่กระโดดไปอีกหน้า |
| |
 |
|
|
 |
 |
|
Code (PHP)
<?php
session_start();
require_once 'conn.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Crop image before upload and insert to database using PHP Mysqli and CropperJS </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" />
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script>
$(document).ready(function(){
var $modal = $('#modal_crop');
var imgName = document.getElementById('sample_image');
var cropper;
$('#upload_image').change(function(event){
var files = event.target.files;
var done = function(url){
imgName.src = url;
$modal.modal('show');
};
if(files && files.length > 0)
{
reader = new FileReader();
reader.onload = function(event)
{
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(imgName, {
aspectRatio: 1,
viewMode: 3,
preview:'.preview'
});
}).on('hidden.bs.modal', function(){
cropper.destroy();
cropper = null;
});
$('#crop_and_upload').click(function(){
canvas = cropper.getCroppedCanvas({
width:400,
height:400
});
canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$.ajax({
url:'crop_upload.php',
method:'POST',
data:{imgName:base64data},
success:function(data)
{
$modal.modal('hide');
}
});
};
});
});
});
</script>
<style>
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
</style>
</head>
<body>
<div class="container" align="center">
<br />
<h3 align="center">Crop image before upload and insert to database using PHP Mysqli and CropperJS</h3>
<br />
<div class="row">
<form method="post">
<input type="file" name="imgName" class="crop_image" id="upload_image" />
</form>
<div class="modal fade" id="modal_crop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Crop Image Before Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img src="" id="sample_image" />
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop_and_upload" class="btn btn-primary">Crop</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tag : PHP, JavaScript, Ajax, jQuery
|
ประวัติการแก้ไข
2024-08-09 10:04:52
2024-08-09 10:20:40
2024-08-14 12:06:03
|
 |
 |
 |
 |
| Date :
2024-08-08 12:15:49 |
By :
mrtee |
View :
216 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (PHP)
<?php
session_start();
if (!isset($_SESSION['stuID'])) {
header("location: login/index.php");
}
include "conn.php";
$stuID = $_SESSION['stuID'];
if(isset($_POST['imgName']))
{
$data = $_POST['imgName'];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$base64_decode = base64_decode($image_array_2[1]);
$path_img = 'upload/'.time().'.png';
$imagename = ''.time().'.png';
file_put_contents($path_img, $base64_decode);
$sql = "UPDATE students SET imgName = '$imagename' WHERE stuID = $stuID";;
$row->query($sql);
}
?>
|
ประวัติการแก้ไข
2024-08-08 12:18:14
2024-08-09 10:21:12
2024-08-14 12:17:36
2024-08-14 12:17:41
| |
|
|
| |
| Date :
2024-08-08 12:16:26 |
By :
mrtee |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ครอบโค้ดด้วยแท็กให้ถูกต้อง
จัด indent สักหน่อย
เพื่อให้แสดงผลที่อ่านง่าย
|
| |
|
|
| |
| Date :
2024-08-09 00:52:04 |
By :
mr.v |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วครับ
https://stackoverflow.com/questions/46423420/open-url-after-success-in-ajax-function
|
| |
|
|
| |
| Date :
2024-08-14 12:04:27 |
By :
mrtee |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
