When uploading photographs to the server, the rotate image before upload feature allows the user to adjust the photo orientation. Before uploading a file, the user can preview it and fix the orientation with this function. When you wish to see the image orientation and rotate it before uploading, the image rotation feature comes in handy.
jQuery can simply be used to preview images before uploading them and to rotate image elements. Using PHP, you may rotate an image to a certain angle and upload it to a server. In this tutorial, we’ll teach you how to use jQuery to preview images and rotate them before uploading them to the server with PHP.
The example picture rotate script will provide the following functionality.
Using JavaScript, provide a preview of the selected image.
Using jQuery, rotate the image in a clockwise or anticlockwise direction (client-side).
PHP may be used to rotate a picture using a specific angle in degrees (server-side).
Upload the image that has been rotated to the server.
Form for uploading images
Create an HTML form that has a file input field (for selecting an image file), a hidden input field (for setting the rotation degrees), and a submit button.
<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="hidden" name="rotation" id="rotation" value="0"/>
<input type="submit" name="submit" value="Upload"/>
</form>Image Preview HTML Element
To preview the image, create an HTML element. The image is rotated anticlockwise with the left button.
The image is rotated clockwise using the Rigth button.
<div class="img-preview" style="display: none;">
<button id="rleft">Left</button>
<button id="rright">Right</button>
<div id="imgPreview"></div>
</div>jQuery Library is a collection of jQuery libraries.
Because the jQuery library is used to add, remove, and rotate image elements, it should be included first.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Using JavaScript to read data from a file
The filePreview() function is a JavaScript function that generates an image preview.
The FileReader object allows you to read the image’s raw file data using JavaScript.
The image preview is appended to the HTML element using jQuery once the image raw content has been loaded.
function filePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgPreview + img').remove();
$('#imgPreview').after('<img src="'+e.target.result+'" class="pic-view" width="450" height="300"/>');
};
reader.readAsDataURL(input.files[0]);
$('.img-preview').show();
}else{
$('#imgPreview + img').remove();
$('.img-preview').hide();
}
}Preview of a Selected Image
When an image file is selected, the filePreview() function displays a preview under the specified element.
Using the jQuery change() technique, the filePreview() function is called when the file input changes.
On the web page, the filePreview() function displays a preview of the specified image.
$("#file").change(function (){
// Image preview
filePreview(this);
});Note that you may utilise JavaScript’s File Type (extension) Validation to limit the user to only choose image files.
jQuery is used to rotate an image.
Using jQuery, the following code rotates the image by modifying the element’s transform attribute.
The rotation degree is calculated based on the selected angle and set transform property to rotate the picture element on the Left/Right button click event.
For server-side use, set the degree value to the rotation input field.
$(function() {
var rotation = 0;
$("#rright").click(function() {
rotation = (rotation -90) % 360;
$(".pic-view").css({'transform': 'rotate('+rotation+'deg)'});
if(rotation != 0){
$(".pic-view").css({'width': '300px', 'height': '300px'});
}else{
$(".pic-view").css({'width': '100%', 'height': '300px'});
}
$('#rotation').val(rotation);
});
$("#rleft").click(function() {
rotation = (rotation + 90) % 360;
$(".pic-view").css({'transform': 'rotate('+rotation+'deg)'});
if(rotation != 0){
$(".pic-view").css({'width': '300px', 'height': '300px'});
}else{
$(".pic-view").css({'width': '100%', 'height': '300px'});
}
$('#rotation').val(rotation);
});
});Rotate the file and upload it to the server.
Following the submission of the form, the selected file is transferred to the server-side script (upload.php) to begin the PHP upload process.
In PHP, use the $_FILES method to get the file data.
Using the PHP $_POST method, you may get the rotation degree.
Use the imagecreatefrompng(), imagecreatefromgif(), or imagecreatefromjpeg() functions to create a new image from a file.
The imagerotate() function rotates an image at a specified angle.
Using the imagepng(), imagegif(), or imagejpeg() functions, save the rotated image to the server.
If the rotation angle is not supplied, use the move uploaded file() function to upload the image to the server.
<?php
$uploadPath = 'uploads/';
$statusMsg = '';
$upload = 0;
if(isset($_POST['submit'])){
if(!empty($_FILES['file']['name'])){
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileTemp = $_FILES['file']['tmp_name'];
$filePath = $uploadPath.basename($fileName);
// Allow certain file formats
$allowTypes = array('image/png','image/jpg','image/jpeg','image/gif');
if(in_array($fileType, $allowTypes)){
$rotation = $_POST['rotation'];
if($rotation == -90 || $rotation == 270){
$rotation = 90;
}elseif($rotation == -180 || $rotation == 180){
$rotation = 180;
}elseif($rotation == -270 || $rotation == 90){
$rotation = 270;
}
if(!empty($rotation)){
switch($fileType){
case 'image/png':
$source = imagecreatefrompng($fileTemp);
break;
case 'image/gif':
$source = imagecreatefromgif($fileTemp);
break;
default:
$source = imagecreatefromjpeg($fileTemp);
}
$imageRotate = imagerotate($source, $rotation, 0);
switch($fileType){
case 'image/png':
$upload = imagepng($imageRotate, $filePath);
break;
case 'image/gif':
$upload = imagegif($imageRotate, $filePath);
break;
default:
$upload = imagejpeg($imageRotate, $filePath);
}
}elseif(move_uploaded_file($fileTemp, $filePath)){
$upload = 1;
}else{
$statusMsg = 'File upload failed, please try again.';
}
}else{
$statusMsg = 'Sorry, only JPG/JPEG/PNG/GIF files are allowed to upload.';
}
}else{
$statusMsg = 'Please select a file to upload.';
}
}
// Display status
if($upload == 1){
echo '<h4>File has been uploaded successfully</h4>';
echo '<img src="'.$filePath.'" width="450" height="300" />';
}else{
echo '<h4>'.$statusMsg.'</h4>';
}
?>Note :
Our PHP example code will show you how to rotate a picture before uploading it to a server. The image preview tool simplifies the image upload process. The option to modify the image orientation adds value to the image upload capabilities. Our example code shows how to rotate an image on the client side with CSS and then upload the rotated picture to the server with PHP. You may easily customise the Preview and Rotate Image Before Upload script to meet your specific requirements.