Quellcode
HTML-Quellcode
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bildbearbeitung</title>
<link rel="stylesheet" href="file_upload.css"/>
<link rel="stylesheet" href="cropper.css"/>
</head>
<body>
<div class="loader-container">
<div class="spinner"></div>
<div>
<div class="progress" id="progressDiv">
<progress id="progressBar" value="0" max="100" ></progress>
</div>
</div>
<div class="form-control">
<h3 id="status"></h3>
<p id="uploaded_progress"></p>
</div>
</div>
<div id="wndGes" class="wndGes" >
<div id="picWnd" class="picWnd">
<div id="show" class="show">
<img src="" alt="">
</div>
</div>
<div id="uploadzone" class="uploadzone" title="Bilder automatisch zuschneiden und an Server senden" >
<p>Dateien für direkten<br>Upload hierher ziehen</p>
</div>
<div id="side-control-page" class="side-control-page">
<div class="zoom" >
<span>Zoom +/-</span>
<ul >
<li title="hinaus Zoomen" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M19.55 20.575 13.25 14.3Q12.5 14.925 11.525 15.275Q10.55 15.625 9.525 15.625Q6.95 15.625 5.175 13.85Q3.4 12.075 3.4 9.5Q3.4 6.95 5.175 5.162Q6.95 3.375 9.525 3.375Q12.075 3.375 13.85 5.15Q15.625 6.925 15.625 9.5Q15.625 10.575 15.275 11.55Q14.925 12.525 14.325 13.25L20.6 19.525ZM9.525 14.125Q11.45 14.125 12.788 12.775Q14.125 11.425 14.125 9.5Q14.125 7.575 12.788 6.225Q11.45 4.875 9.525 4.875Q7.575 4.875 6.238 6.225Q4.9 7.575 4.9 9.5Q4.9 11.425 6.238 12.775Q7.575 14.125 9.525 14.125ZM10.275 12.2H8.775V10.25H6.825V8.75H8.775V6.8H10.275V8.75H12.2V10.25H10.275Z"/></svg></li>
<li title="hinein Zoomen" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M19.55 20.575 13.25 14.3Q12.5 14.925 11.525 15.275Q10.55 15.625 9.525 15.625Q6.95 15.625 5.175 13.85Q3.4 12.075 3.4 9.5Q3.4 6.95 5.175 5.162Q6.95 3.375 9.525 3.375Q12.075 3.375 13.85 5.15Q15.625 6.925 15.625 9.5Q15.625 10.575 15.275 11.55Q14.925 12.525 14.325 13.25L20.6 19.525ZM9.525 14.125Q11.45 14.125 12.788 12.775Q14.125 11.425 14.125 9.5Q14.125 7.575 12.788 6.225Q11.45 4.875 9.525 4.875Q7.575 4.875 6.238 6.225Q4.9 7.575 4.9 9.5Q4.9 11.425 6.238 12.775Q7.575 14.125 9.525 14.125ZM7.125 10.25V8.75H11.9V10.25Z"/></svg></li>
</ul>
</div>
<div class="rotate">
<span>45° rotieren</span>
<ul>
<li title="nach rechts rotieren" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M20.5 12.05H18.975Q18.825 11.2 18.5 10.387Q18.175 9.575 17.65 8.85L18.725 7.8Q19.45 8.675 19.9 9.762Q20.35 10.85 20.5 12.05ZM13.05 21.5V19.95Q13.9 19.825 14.713 19.5Q15.525 19.175 16.25 18.65L17.3 19.725Q16.35 20.45 15.288 20.9Q14.225 21.35 13.05 21.5ZM18.725 18.3 17.65 17.25Q18.175 16.525 18.5 15.712Q18.825 14.9 18.975 14.05H20.5Q20.375 15.2 19.925 16.275Q19.475 17.35 18.725 18.3ZM11.05 21.5Q7.825 21.075 5.688 18.675Q3.55 16.275 3.55 13.05Q3.55 9.5 6.025 7.025Q8.5 4.55 12.05 4.55H12.5L10.7 2.725L11.75 1.65L15.4 5.3L11.75 8.95L10.7 7.9L12.55 6.05H12.05Q9.125 6.05 7.088 8.088Q5.05 10.125 5.05 13.05Q5.05 15.65 6.75 17.613Q8.45 19.575 11.05 19.975Z"/></svg></li>
<li title="nach links rotieren" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.55 12.05Q3.7 10.85 4.15 9.762Q4.6 8.675 5.325 7.8L6.4 8.85Q5.875 9.575 5.55 10.387Q5.225 11.2 5.075 12.05ZM11 21.5Q9.825 21.35 8.763 20.9Q7.7 20.45 6.75 19.725L7.8 18.65Q8.525 19.175 9.338 19.5Q10.15 19.825 11 19.95ZM5.325 18.3Q4.575 17.35 4.125 16.275Q3.675 15.2 3.55 14.05H5.075Q5.225 14.9 5.55 15.712Q5.875 16.525 6.4 17.25ZM13 21.5V19.975Q15.6 19.575 17.3 17.613Q19 15.65 19 13.05Q19 10.125 16.962 8.088Q14.925 6.05 12 6.05H11.5L13.35 7.9L12.3 8.95L8.65 5.3L12.3 1.65L13.35 2.725L11.55 4.55H12Q15.55 4.55 18.025 7.025Q20.5 9.5 20.5 13.05Q20.5 16.275 18.363 18.675Q16.225 21.075 13 21.5Z"/></svg></li>
</ul>
</div>
<div class="flip">
<span>spiegeln</span>
<ul>
<li title="vertikal spiegeln" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M17 13.65 15.95 12.575 18.775 9.75H11.25V8.25H18.775L15.95 5.425L17 4.35L21.65 9ZM7 19.65 2.35 15 7 10.35 8.05 11.425 5.225 14.25H12.75V15.75H5.225L8.05 18.575Z"/></svg></li>
<li title="horizontal spiegeln" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M15 21.65 10.35 17 11.425 15.95 14.25 18.775V11.25H15.75V18.775L18.575 15.95L19.65 17ZM8.25 12.75V5.225L5.425 8.05L4.35 7L9 2.35L13.65 7L12.575 8.05L9.75 5.225V12.75Z"/></svg></li>
</ul>
</div>
</div>
<div class="all-bottom">
<div class="actionButton">
<button class="upload" title="Bild aus Ordner auswählen" >Bild auswählen</button>
<input type="file" class="hidden-upload" style="display: none;" accept="image/.jpg, image/.png, image/.gif">
<button class="download" title="Bild an Server senden" >Bild speichern</button>
</div>
<div class="bottom-control">
<div class="ctrl-cropper">
<span class="deact-act">deaktivieren</span>
<ul>
<li class="li3" title="Raster deaktivieren"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="-80 -80 700 700"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M448 109.3l54.6-54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L402.7 64 160 64v64l178.7 0L128 338.7V32c0-17.7-14.3-32-32-32S64 14.3 64 32V64H32C14.3 64 0 78.3 0 96s14.3 32 32 32H64V384c0 35.3 28.7 64 64 64H352V384H173.3L384 173.3 384 480c0 17.7 14.3 32 32 32s32-14.3 32-32V448h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H448l0-274.7z"/></svg></li>
<li class="li4" title="Raster aktivieren" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M17 15V7Q17 7 17 7Q17 7 17 7H9V5H17Q17.825 5 18.413 5.588Q19 6.175 19 7V15ZM17 23V19H7Q6.175 19 5.588 18.413Q5 17.825 5 17V7H1V5H5V1H7V17Q7 17 7 17Q7 17 7 17H23V19H19V23Z"/></svg></li>
</ul>
</div>
<div class="drag-mode">
<span>ziehen/schieben</span>
<ul>
<li class="li1" title="Raster selbst ziehen" ><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.25,13 C21.6296958,13 21.943491,13.2821539 21.9931534,13.6482294 L22,13.75 L22,18.75 C22,20.4830315 20.6435452,21.8992459 18.9344239,21.9948552 L18.75,22 L14.0821526,22.0001508 C14.6184396,21.614656 15.0554244,21.0997106 15.3473717,20.50105 L18.75,20.5 C19.6681734,20.5 20.4211923,19.7928897 20.4941988,18.8935272 L20.5,18.75 L20.5,13.75 C20.5,13.3357864 20.8357864,13 21.25,13 Z M11.75,9 C13.5449254,9 15,10.4550746 15,12.25 L15,18.75 C15,20.5449254 13.5449254,22 11.75,22 L5.25,22 C3.45507456,22 2,20.5449254 2,18.75 L2,12.25 C2,10.4550746 3.45507456,9 5.25,9 L11.75,9 Z M7.71761187,17.3534213 L7.61611652,17.4445436 L4.66340036,20.3992635 C4.84677699,20.4644898 5.04424157,20.5 5.25,20.5 L11.75,20.5 C11.9557584,20.5 12.153223,20.4644898 12.3365996,20.3992635 L9.38388348,17.4445436 C8.96081549,17.0214757 8.30993487,16.9650666 7.82611684,17.2753165 L7.71761187,17.3534213 L7.71761187,17.3534213 Z M11.75,10.5 L5.25,10.5 C4.28350169,10.5 3.5,11.2835017 3.5,12.25 L3.5,18.75 C3.5,18.9557584 3.53551019,19.153223 3.60073647,19.3365996 L6.55545635,16.3838835 C7.58465058,15.3546892 9.22665998,15.3118062 10.3069221,16.2552342 L10.4445436,16.3838835 L13.3992635,19.3365996 C13.4644898,19.153223 13.5,18.9557584 13.5,18.75 L13.5,12.25 C13.5,11.2835017 12.7164983,10.5 11.75,10.5 Z M11,12 C11.5522847,12 12,12.4477153 12,13 C12,13.5522847 11.5522847,14 11,14 C10.4477153,14 10,13.5522847 10,13 C10,12.4477153 10.4477153,12 11,12 Z M18.75,2 C20.4830315,2 21.8992459,3.35645477 21.9948552,5.06557609 L22,5.25 L22,10.25 C22,10.6642136 21.6642136,11 21.25,11 C20.8703042,11 20.556509,10.7178461 20.5068466,10.3517706 L20.5,10.25 L20.5,5.25 C20.5,4.3318266 19.7928897,3.57880766 18.8935272,3.5058012 L18.75,3.5 L13.75,3.5 C13.3357864,3.5 13,3.16421356 13,2.75 C13,2.37030423 13.2821539,2.05650904 13.6482294,2.00684662 L13.75,2 L18.75,2 Z M10.25,2 C10.6642136,2 11,2.33578644 11,2.75 C11,3.12969577 10.7178461,3.44349096 10.3517706,3.49315338 L10.25,3.5 L5.25,3.5 C4.3318266,3.5 3.57880766,4.20711027 3.5058012,5.10647279 L3.5,5.25 L3.49995678,8.65213751 C2.90086677,8.9440857 2.38556009,9.38125981 1.9998492,9.91784739 L2,5.25 C2,3.51696854 3.35645477,2.10075407 5.06557609,2.00514479 L5.25,2 L10.25,2 Z"></path></svg></li>
<li class="li2" title="Bild verschieben" ><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M8.1 9.5 5 6.4V9H3V3H9V5H6.4L9.5 8.1ZM15.9 9.5 14.5 8.1 17.6 5H15V3H21V9H19V6.4ZM15 21V19H17.6L14.5 15.9L15.9 14.5L19 17.6V15H21V21ZM3 21V15H5V17.6L8.1 14.5L9.5 15.9L6.4 19H9V21Z"/></svg></li>
</ul>
</div>
<div class="saving">
<span>zwischenspeichern</span>
<ul>
<li class="li5" title="Bild für weitere Bearbeitung zwischenspeichern" ><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -40 450 450"><path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/></svg></li>
</ul>
</div>
</div>
</div>
</div>
<script src="drag_and_drop.js"></script>
<script src="cropper.js"></script>
<script src="image_cropping.js"></script>
</body>
</html>
Drag and Drop
var dropZone = document.getElementById('uploadzone');
var dndLoaderContainer = document.querySelector('.loader-container');
var body = document.querySelector('html');
globalFilelistUpload = [];
globalSizeAllFiles = 0;
window.addEventListener('load', function () {
dndLoaderContainer.style.display = 'none';
});
var dndDisplayLoading = function () {
dndLoaderContainer.style.display = 'block';
};
var dndHideLoading = function () {
dndLoaderContainer.style.display = 'none';
};
//prevent image drop outside of the dropzone
body.addEventListener('dragover', function (e)
{
e.dataTransfer.dropEffect = 'none';
});
//setting up for dropevent
dropZone.addEventListener('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
//actual drop event
dropZone.addEventListener('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
//setting array of inputfiles
const fileList = event.dataTransfer.files;
if (fileList.length > 0)
{
getMetadataForFileList(fileList);
};
});
function getMetadataForFileList(fileList)
{
for (let file of fileList)
{
readFile(file);
}
}
function _arrKeyExists(arr, searchKey) {
var flagReturn = false;
arr.forEach(function (element) {
if (element.total === searchKey) {
flagReturn = true;
return true;
}
});
return flagReturn;
}
function _arrayUpdateProgress(arr, searchKey, progressValue) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].total === searchKey) {
globalFilelistUpload[i].loaded = progressValue;
//console.log("update value von "+i+" auf progressValue: "+progressValue);
}
};
}
function _getProgressTotal() {
iTotal = 0;
for (var i = 0; i < globalFilelistUpload.length; i++) {
iTotal += globalFilelistUpload[i].total;
};
return iTotal;
}
function _getProgressCurrent() {
iCurrent = 0;
for (var i = 0; i < globalFilelistUpload.length; i++) {
iCurrent += globalFilelistUpload[i].loaded;
};
return iCurrent;
}
function readFile(file)
{
//set new listener and check for allowed extensions on client side
const reader = new FileReader();
reader.addEventListener('load', function (event)
{
const result = event.target.result;
//preventing upload of forbidden datatypes on clientside
var allowed_extensions = /(jpg|jpeg|gif|png)$/;
var error = "";
if (!file.name.match(allowed_extensions))
{
//constructing an error message for alert
error += "Bitte wähle eine jpeg, jpg, gif, png Datei.";
alert(error);
} else
{
//forming data object for sending
var oFormData = new FormData();
oFormData.append('uploadfile', file);
var jResize = $.ajax(
{
url: "/resize.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: oFormData,
type: 'post'
});
//setting ajax requests for upload and resizing
var jUpload = $.ajax(
{
url: "/original_upload.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: oFormData,
type: 'post',
xhr: function () {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('loadstart', function (event) {
dndDisplayLoading();
}, false);
myXhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
if (_arrKeyExists(globalFilelistUpload, event.total) === false) {
var obj = {};
obj["total"] = event.total;
obj["loaded"] = event.loaded;
globalFilelistUpload.push(obj);
} else {
_arrayUpdateProgress(globalFilelistUpload, event.total, event.loaded);
}
var percentComplete = _getProgressCurrent() / _getProgressTotal() * 100;
percentComplete = Math.round(percentComplete);
document.getElementById('progressBar').value = percentComplete;
document.getElementById('status').innerHTML = "Hochgeladen: " + (_getProgressCurrent() / 1048576).toFixed(2) + " Mb von " + (_getProgressTotal() / 1048576).toFixed(2) + " Mb " + Math.round(percentComplete) + "% hochgeladen.";
if (_getProgressTotal() === _getProgressCurrent()) {
dndHideLoading();
window.location.reload();
}
} else {
alert('Upload konnte nicht abgeschlossen werden');
}
}, false);
myXhr.upload.addEventListener('loadend', function () {
}, false);
}
return myXhr;
}
});
};
});
reader.readAsDataURL(file);
}image cropping
var show = document.querySelector('.show img');
var sideControlPage = document.querySelector('.side-control-page');
var actionButton = document.querySelectorAll('.actionButton');
var hiddenUpload = document.querySelector('.actionButton .hidden-upload');
var zoom = document.querySelectorAll('.side-control-page .zoom svg');
var rotate = document.querySelectorAll('.side-control-page .rotate svg');
var flip = document.querySelectorAll('.side-control-page .flip svg');
var controlCropper = document.querySelectorAll('.bottom-control .ctrl-cropper svg');
var pullMode = document.querySelectorAll('.bottom-control .drag-mode svg');
var cropLoaderContainer = document.querySelector('.loader-container');
var cache = document.querySelector('.saving svg');
var deactAct = document.querySelector('.deact-act');
controlCropper[1].style.display = 'none';
window.addEventListener('load', function () {
cropLoaderContainer.style.display = 'none';
});
const cropDisplayLoading = function () {
cropLoaderContainer.style.display = 'block';
};
const cropHideLoading = function () {
cropLoaderContainer.style.display = 'none';
};
actionButton[0].onclick = function () {
hiddenUpload.click();
};
hiddenUpload.onchange = function () {
var file = hiddenUpload.files[0];
var url = window.URL.createObjectURL(new Blob([file], {type: 'image/jpg'}));
show.src = url;
//setting cropper options
var options = {
dragMode: "crop",
viewMode: 2,
modal: false,
background: false,
ready: function () {
console.log('cropper ready');
//adding cropper functions on Buttons
zoom[0].onclick = function () {
cropper.zoom(0.1);
};
zoom[1].onclick = function () {
cropper.zoom(-0.1);
};
rotate[0].onclick = function () {
cropper.rotate(45);
};
rotate[1].onclick = function () {
cropper.rotate(-45);
};
var flipX = -1;
var flipY = -1;
flip[0].onclick = function () {
cropper.scale(flipX, 1);
flipX -= flipX;
};
flip[1].onclick = function () {
cropper.scale(1, flipY);
flipY -= flipY;
};
controlCropper[0].onclick = function () {
cropper.clear();
deactAct.textContent = "aktivieren";
controlCropper[0].style.display = 'none';
controlCropper[1].style.display = 'block';
};
controlCropper[1].onclick = function () {
cropper.crop();
deactAct.textContent = "deaktivieren";
controlCropper[1].style.display = 'none';
controlCropper[0].style.display = 'block';
};
pullMode[0].onclick = function () {
cropper.setDragMode("crop");
};
pullMode[1].onclick = function () {
cropper.setDragMode("move");
};
cache.onclick = function () {
var imgSrc = cropper.getCroppedCanvas({
width: $(".cropper-crop-box").width(),
height: $(".cropper-crop-box").height()
})
.toDataURL();
cropper.destroy();
show = document.querySelector('.show img');
show.src = imgSrc;
cropper = new Cropper(show, additionalOptions);
};
//getting filename from uploaded image
var file = hiddenUpload.files[0];
var filename = file.name;
actionButton[1].onclick = function () {
cropper.getCroppedCanvas().toBlob(function (blob) {
//getting blob object and attach original filename
var newBlob = new File([blob], `cropped ${filename}`, {
type: 'image/jpg'
});
//form new data object for ajax request
var formData = new FormData();
formData.append('croppedImage', newBlob);
//setting ajax requests to upload cropped image
var jCroppedUpload = $.ajax(
{
url: "/cropper_upload.php",
dataType: 'image/jpg',
cache: false,
contentType: false,
processData: false,
data: formData,
type: 'post',
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('loadstart', function(event){
cropDisplayLoading();
}, false); // for handling the progress of the upload
myXhr.upload.addEventListener('progress', function(event){
if (event.lengthComputable) {
// console.log(event.loaded);
var percentComplete = event.loaded / event.total * 100;
percentComplete = Math.round(percentComplete);
console.log(percentComplete + " %");
document.getElementById('progressBar').value = percentComplete;
document.getElementById('status').innerHTML = "Hochgeladen: " + Math.round(event.loaded/ 1048576) + " Mb von " + Math.round(event.total/ 1048576, 2) + " Mb.";//String output
} else {
// Unable to compute progress information since the total size is unknown
console.log('Upload konnte nicht abgeschlossen werden');
}
}, false); // for handling the progress of the upload
myXhr.upload.addEventListener('loadend', function(){
cropHideLoading();
alert('Bild wurde erfolgreich hochgeladen');
window.location.reload();
}, false); // for handling the progress of the upload
}
return myXhr;
}
});
});
};
}
};
var additionalOptions = options;
var cropper = new Cropper(show, options);
//console.log(cropper);
};tiny png resizing
<?php
//enable error displaying
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
//report all errors
error_reporting(E_ALL);
//getting autoloader
require_once("../vendor/autoload.php");
//database credentials
$servername = "localhost";
$username = "username";
$passwort = "passwort";
$database = "database";
//db connection
$conn = new mysqli($servername, $username, $passwort, $database);
// checking if db is connected
if ($conn->connect_error) {
die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}
echo "erfolgreich Verbunden<br><br>";
//get file from uploadform through js
$file = $_FILES['uploadfile'];
$tmpName = $file['tmp_name'];
//tinify API Key
$tinyKey = \Tinify\setKey("KJLDGHLfguidfgDNFSDKJBFVSDfdfb");
//array for image sizes
$imageSizes = array(100, 200, 300, 700, 1000);
if (true) {
//resizing and compress images in different sizes dynamically via tinify interface
for ($i = 0; $i < count($imageSizes); $i++) {
echo "<br><br>";
$resized = \Tinify\fromFile($tmpName);
$resizeFinished = $resized->resize(array(
"method" => "scale",
//method scale from tinify api does not require width values
//"width" => 150,
"height" => $imageSizes[$i]
));
//setting name and directory for upload to server and db
$resizeFinished->toFile("uploads/" . $i . $file['name'] . "");
$newFilename = "$i" . $file['name'] . "";
//sql path + prevent injections
$sql = "INSERT INTO `Bildupload` (`ID`, `path`) VALUES (NULL, '" . mysqli_real_escape_string($conn, $newFilename) . "')";
if ($conn->query($sql) === TRUE) {
echo "Neue Bildgrößen wurden erstellt";
} else {
echo "Fehler: " . $sql . "<br>" . $conn->error;
}
}
}
$conn->close();
upload original image
<?php
//enable error displaying
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
//report all errors
error_reporting(E_ALL);
$servername = "localhost";
$username = "username";
$passwort = "passwort";
$database = "database";
$conn = new mysqli($servername, $username, $passwort, $database);
if ($conn->connect_error) {
die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}
echo "erfolgreich Verbunden<br><br>";
$file = $_FILES['uploadfile'];
//original image upload to folder and db
if (!empty($file['name'])) {
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
$sql = "INSERT INTO `Bildupload` (`ID`, `path`) VALUES (NULL, '" . mysqli_real_escape_string($conn, $file["name"]) . "')";
if ($conn->query($sql) === true) {
echo "Neuer Eintrag wurde erstellt<br><br>";
} else {
echo "Fehler: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
upload cropped image
<?php
//enable error displaying
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
//report all errors
error_reporting(E_ALL);
$servername = "localhost";
$username = "username";
$passwort = "passwort";
$database = "database";
$conn = new mysqli($servername, $username, $passwort, $database);
if ($conn->connect_error) {
die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}
echo "erfolgreich Verbunden<br><br>";
$file = $_FILES['croppedImage'];
//cropped image upload to folder and db
if (!empty($file['name'])) {
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
$sql = "INSERT INTO `Bildupload` (`ID`, `path`) VALUES (NULL, '" . mysqli_real_escape_string($conn, $file["name"]) . "')";
if ($conn->query($sql) === TRUE) {
echo "Neuer Eintrag wurde erstellt<br><br>";
} else {
echo "Fehler: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
