add files
This commit is contained in:
83
database.php
Normal file
83
database.php
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<?php
|
||||||
|
class Database {
|
||||||
|
|
||||||
|
private $link;
|
||||||
|
|
||||||
|
public function __construct() {
|
||||||
|
// Notice that private connection information is *NOT* part of the source
|
||||||
|
// and therefore does not end up in public repos, etc.
|
||||||
|
//$connectionString = getenv("MYSQLCONNSTR_localdb");
|
||||||
|
$connectionString = "Database=image;Data Source=localhost;User Id=image;Password=image";
|
||||||
|
$varsString = str_replace(";","&", $connectionString);
|
||||||
|
parse_str($varsString);
|
||||||
|
|
||||||
|
$host = $Data_Source;
|
||||||
|
$user = $User_Id;
|
||||||
|
$pass = $Password;
|
||||||
|
$db = $Database;
|
||||||
|
|
||||||
|
try{
|
||||||
|
$this->link = new PDO("mysql:host=".$host.";dbname=".$db, $user, $pass);
|
||||||
|
$this->link->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||||
|
|
||||||
|
}
|
||||||
|
catch (PDOException $e){
|
||||||
|
echo "Error: Unable to connect to MySQL: ". $e->getMessage();
|
||||||
|
die;
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->InitializeImageTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
public function __destruct() {
|
||||||
|
$this->link = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function UploadImage($imageName, $imageFP) {
|
||||||
|
$sql = $this->link->prepare("INSERT INTO images (name, image) VALUES (:name, :image);");
|
||||||
|
$sql->bindParam(":name", $imageName);
|
||||||
|
$sql->bindParam(":image", $imageFP, PDO::PARAM_LOB);
|
||||||
|
|
||||||
|
$sql->execute();
|
||||||
|
|
||||||
|
return $this->link->lastInsertId();
|
||||||
|
}
|
||||||
|
|
||||||
|
public function GetAllImages() {
|
||||||
|
$sql = $this->link->prepare("SELECT * FROM images;");
|
||||||
|
$sql->execute();
|
||||||
|
|
||||||
|
$results = $sql->fetchAll(PDO::FETCH_OBJ);
|
||||||
|
|
||||||
|
return $results;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function FindImage($id) {
|
||||||
|
$sql = $this->link->prepare("SELECT * FROM images WHERE id = :id;");
|
||||||
|
$sql->bindParam(":id", $id, PDO::PARAM_INT);
|
||||||
|
$sql->execute();
|
||||||
|
|
||||||
|
$result = $sql->fetch(PDO::FETCH_OBJ);
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function InitializeImageTable() {
|
||||||
|
// Check to see if the table needs to be created
|
||||||
|
$results = $this->link->query("SHOW TABLES LIKE 'images';");
|
||||||
|
if ($results == TRUE && $results->rowCount() > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// create table
|
||||||
|
$sql = "CREATE TABLE images (
|
||||||
|
id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
name VARCHAR(255) NOT NULL DEFAULT '',
|
||||||
|
image LONGBLOB NOT NULL
|
||||||
|
);";
|
||||||
|
|
||||||
|
if ($this->link->query($sql) != TRUE) {
|
||||||
|
die("Error creating image table: " . $this->link->error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
50
image_display.php
Normal file
50
image_display.php
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
<?php
|
||||||
|
if ((isset($_GET['id']) && is_numeric($_GET['id'])) === FALSE) die;
|
||||||
|
|
||||||
|
include "images.php";
|
||||||
|
$imageId = $_GET['id'];
|
||||||
|
$image = Images::GetImage($imageId);
|
||||||
|
|
||||||
|
// get the source image attributes
|
||||||
|
$srcImage = $image->image;
|
||||||
|
$srcSize = getImageSizeFromString($srcImage);
|
||||||
|
$srcWidth = $srcSize[0];
|
||||||
|
$srcHeight = $srcSize[1];
|
||||||
|
$srcType = $srcSize[2];
|
||||||
|
$srcMime = $srcSize['mime'];
|
||||||
|
$srcImageResource = imageCreateFromString($srcImage);
|
||||||
|
|
||||||
|
// set the header for the image
|
||||||
|
header("Content-type: ".$srcMime);
|
||||||
|
|
||||||
|
if ((isset($_GET['width']) && is_numeric($_GET['width'])) === FALSE) {
|
||||||
|
// no width requested - just return the source
|
||||||
|
echo $srcImage;
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// resize/resample the image to the requested size
|
||||||
|
$destWidth = $_GET['width'];
|
||||||
|
$destHeight = $destWidth * $srcSize[1] / $srcSize[0];
|
||||||
|
|
||||||
|
$destImageResource = imageCreateTrueColor($destWidth, $destHeight);
|
||||||
|
imagealphablending($destImageResource, false);
|
||||||
|
imagesavealpha($destImageResource, true);
|
||||||
|
imageCopyResampled($destImageResource, $srcImageResource, 0,0,0,0, $destWidth, $destHeight, $srcWidth, $srcHeight);
|
||||||
|
|
||||||
|
// export the image
|
||||||
|
switch ($srcType) {
|
||||||
|
case IMAGETYPE_JPEG:
|
||||||
|
imageJPEG($destImageResource);
|
||||||
|
break;
|
||||||
|
case IMAGETYPE_PNG:
|
||||||
|
imagePNG($destImageResource);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
imageJPEG($destImageResource);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
imageDestroy($destImageResource);
|
||||||
|
?>
|
||||||
78
images.php
Normal file
78
images.php
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
|
||||||
|
<?php
|
||||||
|
include "database.php";
|
||||||
|
|
||||||
|
class Images {
|
||||||
|
|
||||||
|
public static function Upload() {
|
||||||
|
|
||||||
|
$maxsize = 4194304; // set to 4 MB
|
||||||
|
|
||||||
|
// check associated error code
|
||||||
|
if ($_FILES['imageToUpload']['error'] == UPLOAD_ERR_OK) {
|
||||||
|
|
||||||
|
// check whether file is uploaded with HTTP POST
|
||||||
|
if (is_uploaded_file($_FILES['imageToUpload']['tmp_name'])) {
|
||||||
|
|
||||||
|
// check size of uploaded image on server side
|
||||||
|
if ( $_FILES['imageToUpload']['size'] < $maxsize) {
|
||||||
|
|
||||||
|
// check whether uploaded file is of image type
|
||||||
|
$finfo = finfo_open(FILEINFO_MIME_TYPE);
|
||||||
|
if (strpos(finfo_file($finfo, $_FILES['imageToUpload']['tmp_name']), "image") === 0) {
|
||||||
|
|
||||||
|
// open the image file for insertion
|
||||||
|
$imagefp = fopen($_FILES['imageToUpload']['tmp_name'], 'rb');
|
||||||
|
|
||||||
|
// put the image in the db...
|
||||||
|
$database = new Database();
|
||||||
|
$id = $database->UploadImage($_FILES['imageToUpload']['name'], $imagefp);
|
||||||
|
header("Location: /");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
else { // not an image
|
||||||
|
echo '<script type="text/javascript">';
|
||||||
|
echo 'alert("Uploaded file is not an image");';
|
||||||
|
echo 'window.location.href = "/";';
|
||||||
|
echo '</script>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else { // file too large
|
||||||
|
echo '<script type="text/javascript">';
|
||||||
|
echo 'alert("Uploaded file is too large");';
|
||||||
|
echo 'window.location.href = "/";';
|
||||||
|
echo '</script>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else { // upload failed
|
||||||
|
echo '<script type="text/javascript">';
|
||||||
|
echo 'alert("File upload failed");';
|
||||||
|
echo 'window.location.href = "/";';
|
||||||
|
echo '</script>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
echo '<script type="text/javascript">';
|
||||||
|
echo 'alert("File upload failed");';
|
||||||
|
echo 'window.location.href = "/";';
|
||||||
|
echo '</script>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function GetImages() {
|
||||||
|
$database = new Database();
|
||||||
|
$images = $database->GetAllImages();
|
||||||
|
return $images;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function GetImage($id) {
|
||||||
|
$database = new Database();
|
||||||
|
$image = $database->FindImage($id);
|
||||||
|
return $image;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
101
index.php
Normal file
101
index.php
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>ImageNet</title>
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
<!-- Optional theme -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
|
||||||
|
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="content/styles.css" type='text/css'>
|
||||||
|
|
||||||
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
|
<!-- Latest compiled and minified JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid bg-primary">
|
||||||
|
<div class="row col-md-12">
|
||||||
|
<h3>My Images</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar navbar-default">
|
||||||
|
<form class="navbar-form navbar-left" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="sr-only" for="imageToUpload">Image to Upload</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<span class="btn btn-default btn-file" type="button">
|
||||||
|
Image File:<input type="file" id="imageToUpload" name="imageToUpload">
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Select a file to upload..." id="selectedFileName" readonly>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default navbar-btn">Upload</button>
|
||||||
|
<?php
|
||||||
|
if (isset($_FILES['imageToUpload'])) {
|
||||||
|
include "images.php";
|
||||||
|
try {
|
||||||
|
Images::Upload(); // upload the image
|
||||||
|
}
|
||||||
|
catch (Exception $e) { // upload failed
|
||||||
|
$msg = $e->getMessage();
|
||||||
|
echo '<script type="text/javascript">';
|
||||||
|
echo 'alert("'.$msg.'");';
|
||||||
|
echo 'window.location.href = "/";';
|
||||||
|
echo '</script>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<?php
|
||||||
|
include "images.php";
|
||||||
|
$images = Images::GetImages();
|
||||||
|
foreach ($images as $image) {
|
||||||
|
?>
|
||||||
|
<div class='col-lg-2 col-md-4 col-sm-6 col-xs-12'>
|
||||||
|
<?php
|
||||||
|
echo "<a href='image_display.php?id=".$image->id."' target='_blank'>";
|
||||||
|
echo "<img class='img-responsive' src='image_display.php?id=".$image->id."&width=192' alt='' />";
|
||||||
|
echo "</a>";
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" language="javascript">
|
||||||
|
// Show name of selected image file in the text display in the custom UI element
|
||||||
|
$(document).ready(function () {
|
||||||
|
$(document).on('change', '.btn-file :file', function () {
|
||||||
|
var input = $(this),
|
||||||
|
numFiles = input.get(0).files ? input.get(0).files.length : 1,
|
||||||
|
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
|
||||||
|
input.trigger('fileselect', [numFiles, label]);
|
||||||
|
})
|
||||||
|
|
||||||
|
$('.btn-file :file').on('fileselect', function (event, numFiles, label) {
|
||||||
|
console.log(numFiles);
|
||||||
|
console.log(label);
|
||||||
|
$("#selectedFileName").val(label);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
55
styles.css
Normal file
55
styles.css
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
/* Custom background color for the nav-bar element. */
|
||||||
|
.navbar {
|
||||||
|
background-color: #d9edf7; /*matches bg-info*/
|
||||||
|
background-image: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Support for custom-looking File Selection button. */
|
||||||
|
.btn-file {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.btn-file input[type=file] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
font-size: 100px;
|
||||||
|
text-align: right;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
opacity: 0;
|
||||||
|
outline: none;
|
||||||
|
background: white;
|
||||||
|
cursor: inherit;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling/framing for the image elements. */
|
||||||
|
img {
|
||||||
|
width: 192px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 5px 5px 30px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom queries for force line breaks depending on the resolution. */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.col-lg-2:nth-child(6n+1) {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992pxpx) and (max-width: 1200px) {
|
||||||
|
.col-md-4:nth-child(3n+1) {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 992px) {
|
||||||
|
.col-sm-6:nth-child(2n+1) {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user