Rotate image before upload<\/b> feature allows the user to fix the photo orientation when uploading images to the server. With this feature, the user can preview the image and correct the orientation before file upload. Image rotation functionality is very useful when you want to preview the image orientation and rotate image before upload.<\/p>\n
Preview image before upload<\/a> and rotate image element functionality can be easily implemented using jQuery. You can rotate image in a specific angle and upload image to server using PHP. In this tutorial, we will show you how to preview image using jQuery and rotate image before upload<\/b> to the server using PHP.<\/p>\n The following functionality will be integrated into the example image rotate<\/b> script.<\/p>\n Create an HTML form with a file input field (for select image file), hidden input (for specifying the rotation degrees) and a submit button.<\/p>\n Define an HTML element to preview the image.<\/p>\n The jQuery is used to add, remove, and rotate image element, so include the jQuery library first.<\/p>\n The Once an image file is selected, the preview appears under the specified element using filePreview()<\/b> function.<\/p>\n Note that:<\/span> You can use the File Type (extension) Validation using JavaScript<\/a> to restrict the user to select only the image files.<\/p>\n The following code rotates the image by changing the transform property of the element using jQuery.<\/p>\n After the form submission, the selected file is sent to the server-side script (\n
Image Upload Form<\/h2>\n
<form<\/span> method<\/span>=\"post\"<\/span> action<\/span>=\"upload.php\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"file\"<\/span> id<\/span>=\"file\"<\/span> \/><\/span>\r\n <input<\/span> type<\/span>=\"hidden\"<\/span> name<\/span>=\"rotation\"<\/span> id<\/span>=\"rotation\"<\/span> value<\/span>=\"0\"<\/span>\/><\/span>\r\n <input<\/span> type<\/span>=\"submit\"<\/span> name<\/span>=\"submit\"<\/span> value<\/span>=\"Upload\"<\/span>\/><\/span>\r\n<\/form<\/span>><\/span><\/pre>\nHTML Element for Image Preview<\/h2>\n
\n
<div<\/span> class<\/span>=\"img-preview\"<\/span> style<\/span>=\"display: none;\"<\/span>><\/span>\r\n <button<\/span> id<\/span>=\"rleft\"<\/span>><\/span>Left<\/button<\/span>><\/span>\r\n <button<\/span> id<\/span>=\"rright\"<\/span>><\/span>Right<\/button<\/span>><\/span>\r\n <div<\/span> id<\/span>=\"imgPreview\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\njQuery Library<\/h2>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nRead File Data using JavaScript<\/h2>\n
filePreview()<\/code> is a custom JavaScript function that generates a preview of the image.<\/p>\n\n
function<\/span> filePreview<\/span>(input<\/span>) <\/span>{\r\n if<\/span> (input.files && input.files[0<\/span>]) {\r\n var<\/span> reader = new<\/span> FileReader();\r\n reader.onload = function<\/span> (e<\/span>) <\/span>{\r\n $('#imgPreview + img'<\/span>).remove();\r\n $('#imgPreview'<\/span>).after('<img src=\"'<\/span>+e.target.result+'\" class=\"pic-view\" width=\"450\" height=\"300\"\/>'<\/span>);\r\n };\r\n reader.readAsDataURL(input.files[0<\/span>]);\r\n $('.img-preview'<\/span>).show();\r\n }else<\/span>{\r\n $('#imgPreview + img'<\/span>).remove();\r\n $('.img-preview'<\/span>).hide();\r\n }\r\n}<\/pre>\nSelected Image Preview<\/h2>\n
\n
filePreview()<\/code> function is triggered using the jQuery change()<\/b> method.<\/li>\nfilePreview()<\/code> function displays a preview of the selected image on the web page.<\/li>\n<\/ul>\n$(\"#file\"<\/span>).change(function<\/span> (<\/span>)<\/span>{\r\n \/\/ Image preview<\/span>\r\n filePreview(this<\/span>);\r\n});<\/pre>\nRotate Image using jQuery<\/h2>\n
\n
\n
$(function<\/span>(<\/span>) <\/span>{\r\n var<\/span> rotation = 0<\/span>;\r\n $(\"#rright\"<\/span>).click(function<\/span>(<\/span>) <\/span>{\r\n rotation = (rotation -90<\/span>) % 360<\/span>;\r\n $(\".pic-view\"<\/span>).css({'transform'<\/span>: 'rotate('<\/span>+rotation+'deg)'<\/span>});\r\n\t\t\r\n if<\/span>(rotation != 0<\/span>){\r\n $(\".pic-view\"<\/span>).css({'width'<\/span>: '300px'<\/span>, 'height'<\/span>: '300px'<\/span>});\r\n }else<\/span>{\r\n $(\".pic-view\"<\/span>).css({'width'<\/span>: '100%'<\/span>, 'height'<\/span>: '300px'<\/span>});\r\n }\r\n $('#rotation'<\/span>).val(rotation);\r\n });\r\n\t\r\n $(\"#rleft\"<\/span>).click(function<\/span>(<\/span>) <\/span>{\r\n rotation = (rotation + 90<\/span>) % 360<\/span>;\r\n $(\".pic-view\"<\/span>).css({'transform'<\/span>: 'rotate('<\/span>+rotation+'deg)'<\/span>});\r\n\t\t\r\n if<\/span>(rotation != 0<\/span>){\r\n $(\".pic-view\"<\/span>).css({'width'<\/span>: '300px'<\/span>, 'height'<\/span>: '300px'<\/span>});\r\n }else<\/span>{\r\n $(\".pic-view\"<\/span>).css({'width'<\/span>: '100%'<\/span>, 'height'<\/span>: '300px'<\/span>});\r\n }\r\n $('#rotation'<\/span>).val(rotation);\r\n });\r\n});<\/pre>\nRotate and Upload File to Server<\/h2>\n
upload.php<\/code>) to proceed with the upload process using PHP. <\/p>\n\n
<?php
$uploadPath <\/span>= <\/span>'uploads\/'<\/span>;
<\/span>$statusMsg <\/span>= <\/span>''<\/span>;
<\/span>$upload <\/span>= <\/span>0<\/span>;
if(isset(<\/span>$_POST<\/span>[<\/span>'submit'<\/span>])){
if(!empty(<\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'name'<\/span>])){
<\/span>$fileName <\/span>= <\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'name'<\/span>];
<\/span>$fileType <\/span>= <\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'type'<\/span>];
<\/span>$fileTemp <\/span>= <\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'tmp_name'<\/span>];
<\/span>$filePath <\/span>= <\/span>$uploadPath<\/span>.<\/span>