Jump to content

display an uploaded file in a given div


Recommended Posts

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 



require_once 'DB.php'; 

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

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


	$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)) 
			$query = "INSERT INTO images (name, original_name, mime_type, images) VALUES (?,?,?,?)";

			$stmt = $link->prepare($query);
				$id=$stmt->insert_id;	// get the just inserted id
				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;
				// rethrow exception
				throw $imageException;
		die("File id must be numeric");

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

	$stmt = $link->prepare($query);

	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>";



		<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 />


		<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. -->
		<!-- <img class="div2" src="'<?php // readfile($filename); ?>'" alt="load image" /> -->
			function readURL(input) {
				if (input.files && input.files[0]) 
					var reader = new FileReader();
					reader.onload = function (e) {
						.attr('src', e.target.result)
					alert( "File not selected or browser incompatible." );


.div1 {
    width: 220px;
    border:1px solid navy;
.div2 {
    width: 350px;
    border:1px solid navy;

	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 ! 


Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.