first of all I found some topics about this on this forum but just can't seem to get it right on my page... so that's why I'm asking.
I am trying to make a image upload script for a webpage that allows somebody to upload a picture with discription to the webpage. so far I got the upload good and it gets stored onto the database and displayed, but the problem I'm having is that the text from textarea doesn't show brakes when retreiving the data from mysql...
how can I fix this?
this is the upload.php
<?php
// Start a session for error reporting
session_start();
// Call our connection file
require("includes/conn.php");
// Check to see if the type of file uploaded is a valid image type
function is_valid_type($file)
{
// This is an array that holds all the valid image MIME types
$valid_types = array("image/jpg", "image/jpeg", "image/bmp", "image/gif");
if (in_array($file['type'], $valid_types))
return 1;
return 0;
}
// Just a short function that prints out the contents of an array in a manner that's easy to read
// I used this function during debugging but it serves no purpose at run time for this example
function showContents($array)
{
echo "<pre>";
print_r($array);
echo "</pre>";
}
// Set some constants
// This variable is the path to the image folder where all the images are going to be stored
// Note that there is a trailing forward slash
$TARGET_PATH = "content/uploads/";
// Get our POSTed variables
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$image = $_FILES['image'];
// Sanitize our inputs
$fname = mysql_real_escape_string($fname);
$lname = mysql_real_escape_string($lname);
$image['name'] = mysql_real_escape_string($image['name']);
// Build our target path full string. This is where the file will be moved do
// i.e. images/picture.jpg
$TARGET_PATH .= $image['name'];
// Make sure all the fields from the form have inputs
if ( $fname == "" || $lname == "" || $image['name'] == "" )
{
$_SESSION['error'] = "All fields are required";
header("Location: index.php");
exit;
}
// Check to make sure that our file is actually an image
// You check the file type instead of the extension because the extension can easily be faked
if (!is_valid_type($image))
{
$_SESSION['error'] = "You must upload a jpeg, gif, or bmp";
header("Location: index.php");
exit;
}
// Here we check to see if a file with that name already exists
// You could get past filename problems by appending a timestamp to the filename and then continuing
if (file_exists($TARGET_PATH))
{
$_SESSION['error'] = "A file with that name already exists";
header("Location: index.php");
exit;
}
// Lets attempt to move the file from its temporary directory to its new home
if (move_uploaded_file($image['tmp_name'], $TARGET_PATH))
{
// NOTE: This is where a lot of people make mistakes.
// We are *not* putting the image into the database; we are putting a reference to the file's location on the server
$sql = "insert into people (fname, lname, filename) values ('$fname', '$lname', '" . $image['name'] . "')";
$result = mysql_query($sql) or die ("Could not insert data into DB: " . mysql_error());
header("Location: images.php");
exit;
}
else
{
// A common cause of file moving failures is because of bad permissions on the directory attempting to be written to
// Make sure you chmod the directory to be writeable
$_SESSION['error'] = "Could not upload file. Check read/write persmissions on the directory";
header("Location: index.php");
exit;
}
?>and this is the php that needs to show the images with the discription and brakes when entered into the textarea:
<?php
// Get our database connector
require("includes/conn.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dream in code tutorial - List of Images</title>
</head>
<body>
<div>
<?php
// Grab the data from our people table
$sql = "select * from people";
$result = mysql_query($sql) or die ("Could not access DB: " . mysql_error());
while ($row = mysql_fetch_assoc($result))
{
echo "<div class=\"picture\">";
echo "<p>";
// Note that we are building our src string using the filename from the database
echo "<img src=\"content/uploads/" . $row['filename'] . "\" alt=\"\" /><br />";
echo $row['fname'] . " " . "<br />" . "<br />" . $row['lname'] . "<br />";
echo "</p>";
echo "</div>";
}
?>
</div>
</body>
</html>and for certenty, this is the index.php that let's you enter the discription and upload the image:
<?php
// Start a session for displaying any form errors
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dream in code tutorial</title>
<style type="text/css">
label
{
float: left;
text-align: right;
margin-right: 10px;
width: 100px;
color: black;
}
#submit
{
float: left;
margin-top: 5px;
position: relative;
left: 110px;
}
#error
{
color: red;
font-weight: bold;
font-size: 16pt;
}
</style>
</head>
<body>
<div>
<?php
if (isset($_SESSION['error']))
{
echo "<span id=\"error\"><p>" . $_SESSION['error'] . "</p></span>";
unset($_SESSION['error']);
}
?>
<form action="upload.php" method="post" enctype="multipart/form-data">
<p>
<label>Merk</label>
<input type="text" name="fname" size="50"/><br />
<label>beschrijving</label>
<textarea name="lname" style="width:250px;height:150px;"></textarea><br />
<label>Upload afbeelding</label>
<input type="file" name="image" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
<input type="submit" id="submit" value="Upload" />
</p>
</form>
</div>
</body>
</html>I've tried several things like using and the nl2br but nothings seems to work (probably because I use it wrongfully...)
I think there is a pretty simple solution for you. First change this:
$lname = mysql_real_escape_string($lname);
To this:
$lname = mysql_real_escape_string(nl2br($lname));
That will take any newline characters and turn them into <BR> characters, and then escape it for the mySQL insert.
You will also have to change your text field to a textarea instead. So change this:
<input type="text" name="lname" size="50"/>
To this:
<textarea name="lname" cols="50" rows="3"></textarea>
Hope that works! Let me know if you have any follow-up questions.