It took me a while to work this out, but it was worth it. base64 encoding can be really useful in presenting and storing images on the web. However you don't want to add a 2000 pixel width base64 encoded image to your database. Here's how to resize the image before it goes in.
<?php
$file = 'mypic.jpg';
$image = imagecreatefromjpeg($file);
$image = imagescale($image , 100);
ob_start();
imagejpeg($image);
$contents = ob_get_contents();
ob_end_clean();
$dataUri = "data:image/jpeg;base64,".base64_encode($contents);
echo '<img src="'.$dataUri.'" />';
?>
Monday, 15 August 2016
Wednesday, 10 August 2016
Using jQuery FormData to include files when making POST request
In this example I create a form, with a text, and file input field. When I submit the form, contents from all input fields are submitted through the 'FormData' class. The results from the called script are returned to a div. Finally, the fields are then cleared.
<html>
<head>
<title>jQuery File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="text" name="myname" />
<input type="file" name="fileinfo" multiple="" />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
(function()
{
$('form').on('submit', function(e)
{
var theDiv = $('div#result');
var thisForm = $(this);
var action = thisForm.attr('action');
var method = thisForm.attr('method');
$.ajax(
{
url: action,
type: method,
data: new FormData(this),
processData: false,
contentType: false
}).done(function(datareceived)
{
thisForm.find('input, textarea').val('');
theDiv.html(datareceived);
});
e.preventDefault();
});
})();
</script>
</body>
</html>
To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
{
$str .= $file['name'].' not uploaded<br />';
}
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
$str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>
<html>
<head>
<title>jQuery File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="text" name="myname" />
<input type="file" name="fileinfo" multiple="" />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
(function()
{
$('form').on('submit', function(e)
{
var theDiv = $('div#result');
var thisForm = $(this);
var action = thisForm.attr('action');
var method = thisForm.attr('method');
$.ajax(
{
url: action,
type: method,
data: new FormData(this),
processData: false,
contentType: false
}).done(function(datareceived)
{
thisForm.find('input, textarea').val('');
theDiv.html(datareceived);
});
e.preventDefault();
});
})();
</script>
</body>
</html>
To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
{
$str .= $file['name'].' not uploaded<br />';
}
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
$str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>
Monday, 25 July 2016
Ratings field within Bootstrap using Font Awesome stars
I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Font awesome stars</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.star-selected
{
color:pink;
}
</style>
</head>
<body>
<form method="POST" action="someaction.php">
<div class="form-group">
<input type="hidden" name="stars">
<i class="fa fa-star" aria-hidden="true" value="1"></i>
<i class="fa fa-star" aria-hidden="true" value="2"></i>
<i class="fa fa-star" aria-hidden="true" value="3"></i>
<i class="fa fa-star" aria-hidden="true" value="4"></i>
<i class="fa fa-star" aria-hidden="true" value="5"></i>
</div>
<button type="submit">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
(function()
{
var theStars = $('form').find('i');
$('i').on('click', function()
{
theStars.removeClass('star-selected');
var theStarIclicked = $(this);
var highVal = theStarIclicked.attr('value');
theStarIclicked.addClass('star-selected');
$("input[name='stars']").attr('value',highVal);
theStars.each(function(i)
{
if($(this).attr('value') < highVal)
{
$(this).addClass('star-selected');
}
});
console.log('Star selected '+$("input[name='stars']").attr('value'));
});
})();
</script>
</body>
</html>
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Font awesome stars</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.star-selected
{
color:pink;
}
</style>
</head>
<body>
<form method="POST" action="someaction.php">
<div class="form-group">
<input type="hidden" name="stars">
<i class="fa fa-star" aria-hidden="true" value="1"></i>
<i class="fa fa-star" aria-hidden="true" value="2"></i>
<i class="fa fa-star" aria-hidden="true" value="3"></i>
<i class="fa fa-star" aria-hidden="true" value="4"></i>
<i class="fa fa-star" aria-hidden="true" value="5"></i>
</div>
<button type="submit">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
(function()
{
var theStars = $('form').find('i');
$('i').on('click', function()
{
theStars.removeClass('star-selected');
var theStarIclicked = $(this);
var highVal = theStarIclicked.attr('value');
theStarIclicked.addClass('star-selected');
$("input[name='stars']").attr('value',highVal);
theStars.each(function(i)
{
if($(this).attr('value') < highVal)
{
$(this).addClass('star-selected');
}
});
console.log('Star selected '+$("input[name='stars']").attr('value'));
});
})();
</script>
</body>
</html>
Wednesday, 6 April 2016
jQuery plugin to insert external content
This jQuery plugin takes 2 parameters:
- The location of an external website
- The element within that location which contains content you would like to insert in yours
Wednesday, 23 March 2016
jQuery plugin which takes and receives form data
This jQuery plugin to take all form data, pass it to a named script and return a message to a named HTML element. Particularly good with Twitter Bootstrap.
See the code here.
See the code here.
Use jQuery to handle GET requests in a Twitter Bootstrap page
Today, I created a jQuery plugin. It takes GET requests via apage URL and passes the content to declared HTML elements.
See the code here.
See the code here.
HTML includes like PHP using jQuery
Here I have created a jQuery plugin to perform HTML includes (sub pages) similar to method possible in PHP.
Find the code here.
Find the code here.
Subscribe to:
Posts (Atom)