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