display an uploaded file in a given div

ajoo · November 8, 2016

Hi all !

I have been experimenting with a bit of code that uploads file to the server. The image is previewed once selected and can then be uploaded. The uploaded image is then selected and displayed. Here is the code

usp5.php

<?php
error_reporting(E_ALL);
require_once 'DB.php'; 

$uploaddir = 'D:/xampp/php/internals/uploads/'; # Outside of web root

// echo $uploadfile."<br>";
// exit();


if(isset($_POST['upload']))
{

	$blob = "BLOB";
	$filename = $_FILES['userfile']['name'];
	$filetype = $_FILES['userfile']['type'];
	$tmp_filename = $_FILES['userfile']['tmp_name'];
	
	$uploadfile = tempnam($uploaddir, "upm");

	if (move_uploaded_file($tmp_filename, $uploadfile)) 
	{
	
		try
		{
			$query = "INSERT INTO images (name, original_name, mime_type, images) VALUES (?,?,?,?)";

			$stmt = $link->prepare($query);
			$stmt->bind_param('ssss',$uploadfile,$filename,$filetype,$blob);
			if($stmt->execute()){
				
				$id=$stmt->insert_id;	// get the just inserted id
			}
			else{
				
				echo "Error : ".$link->error;
			}
		}
		catch(mysqli_sql_exception $imageException)
		{
			if ($imageException->getCode() === MYSQL_ER_DUP_ENTRY)
			{
				echo'The filename is already taken, please choose a different name.';
				return false;
			}
			else
			{
				// rethrow exception
				throw $imageException;
			}
		}	
	}	
	
	if(!is_numeric($id)) 
	{
		die("File id must be numeric");
	}

	$query = 'SELECT name, mime_type FROM images WHERE id=?';

	$stmt = $link->prepare($query);
	$stmt->bind_param('i',$id);
	$stmt->execute();	
	$stmt->bind_result($filename,$type);
	$stmt->store_result();
	$stmt->fetch();	
	
	$stmt->free_result();

	if(is_null($filename) || count($filename)===0)
	{
		die("File not found");
	}
	

	header("Content-Type: " . $type);
	// echo "<div class='div2'>";    // works good without the div. Divs cause the binary dump to show instead 
	echo '<img src="'.readfile($filename).'"alt="">'; 
	// echo "</div>";
}

?>

<html>
	<head>

		<title>File Upload To Database</title>

		<link class="jsbin"  href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" >
		<link rel="stylesheet" type="text/css" media="screen" href="divs.css" />
		
		<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
		<meta charset=utf-8 />
	
	</head>

	<body>

		<form name="upload" action="#" method="POST" enctype="multipart/form-data">

			Select the file to upload: 	<br>
			
			<input type="file" name="userfile" onchange="readURL(this)"; /><br>
			<br><input type="submit" name="upload" value="Upload">
			<div class = "div1">
			<img id="image" src="#" alt="load image" />		<!-- This displays the image. -->
			</div>
		
		</form>
	
		<!-- <img class="div2" src="'<?php // readfile($filename); ?>'" alt="load image" /> -->
		
		<script>
			function readURL(input) {
				if (input.files && input.files[0]) 
				{
					var reader = new FileReader();
					reader.onload = function (e) {
					  $('#image')
						.attr('src', e.target.result)
						.width(200)
						.height(200);
					};
					reader.readAsDataURL(input.files[0]);
				}else{
					alert( "File not selected or browser incompatible." );
				}
			}
		</script>
	</body>
</html>

divs.css

.div1 {
    height:220px;
    width: 220px;
    display:block;
    margin:5px;		
    border:1px solid navy;
	background-color:#ffffbb;
}
.div2 {
    height:350px;
    width: 350px;
    display:block;
    margin-left:1px;	
    border:1px solid navy;
    background-color:#ffaaff;
}

img{
	
	max-width: 100%;
	max-height: 100%;
	
}

In the first preview, before upload, a bigger image is automatically reduced to fit into a 200px by 200px due to the width and height set in the jquery. After the image is loaded on the server and is selected using the id of the image, I am unable to fit the same in a div to restrict the size of the image to any arbitrary given dimensions. Kindly help me with that.

Is it possible to display both the images simultaneously in two separate divs ? How ?

Any security issues in this ?

Thanks all !

ajoo · November 9, 2016

Hi all !

I realized that the code snippet requires to make a db connection. DB.php is not present. Anyways , the snippet above works just fine. It's just that I am unable to constrain it's size of the displayed image (after reading the stored image on the server) to the one I want. I have seen similar code on the net but that does not use the readfile function. I think it has to do with this function that the image size is not being constrained.

<img width="xxx" height="yyy" ...

doesn't seem to work either. Is there any way to constraint the size of the displayed image without actually resizing it ?

Thanks all !

Sign In

display an uploaded file in a given div

Recommended Posts

ajoo

Link to comment

Share on other sites

ajoo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information