I have a button which uploads a background image to a folder and saves the file name to the database, but I cant figure how to re size the image before uploading it. Actually I am facing two problems. 1 - How to resize the image and upload it. 2 - How to display the image as background image for a div which is having a different dimension.
What I have done till now :
Html
<div class="image_load_div">
<form id="imageform" enctype="multipart/form-data" method="post" action="upload.php">
<input name="photoimg" id="photoimg" type="file"/>
</form>
</div>
javascript
$("#imageform").ajaxForm().submit();
php- upload file
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)) {
if($size<(1024*1024)) {
session_start();
$id = $_SESSION['QuestionId'];
$path = "/images/Img/".$id."_bg.".$ext;
if( move_uploaded_file($_FILES["photoimg"]["tmp_name"],$path) ) {
// Save the file name into database
}
else { echo "<script>alert('Upload failed');</script>"; }
else { echo "<script>alert('Image file size max 1 MB');</script>"; }
else { echo "<script>alert('Invalid file format..');</script>"; }
else { echo "<script>alert('Please select image..!');</script>"; exit; }
I would like to save the image as height:408px; width:490px; and when displaying the image I want to display this image width:174px; height:108px; IMP !During uploading and when displaying, need to consider the aspect ratio;
for now uploading is working.
please help me to solve this. Thanks.