This script inserts data into a table, as well as uploads an image
I want the URL from the image upload to be inserted into the column image
Another problem that I'm having is that when I put the upload portion of the form inside the other form, it refreshes the page and says that the file is not selected anymore.
Ideally I would only have one submit button, and the load bar would still work the same way, giving a dialog box saying the file was uploaded successfully and then after closing that it will submit the form into the database.
index.php
<?php
session_start();
if(isset($_SESSION['username']))
{
mysql_connect ('localhost', 'root', '') ;
mysql_select_db ('admin');
}
else
{
header("Location: index.php");
}
if (isset($_POST['submit'])) {
$month = htmlspecialchars(strip_tags($_POST['month']));
$date = htmlspecialchars(strip_tags($_POST['date']));
$year = htmlspecialchars(strip_tags($_POST['year']));
$time = htmlspecialchars(strip_tags($_POST['time']));
$title = htmlspecialchars(strip_tags($_POST['title']));
$entry = $_POST['entry'];
$image = htmlspecialchars(strip_tags($_POST['myPost']));
$timestamp = strtotime($month . " " . $date . " " . $year . " " . $time);
$entry = nl2br($entry);
if (!get_magic_quotes_gpc()) {
$title = addslashes($title);
$entry = addslashes($entry);
}
$sql = "INSERT INTO posts (timestamp,title,entry,image) VALUES ('$timestamp','$title','$entry','$image')";
$result = mysql_query($sql) or print("Can't insert into table.<br />" . $sql . "<br />" . mysql_error());
mysql_close();
header("location: index.php");
}
$current_month = date("F");
$current_date = date("d");
$current_year = date("Y");
$current_time = date("H:i");
$sess_val = time(); //create a unique identifier for this upload session that will be the value of the hidden input
$sess_name = ini_get("session.upload_progress.name"); //this constant will be the name of the hidden input
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Geeky Gents</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="images/favicon.ico" />
<script>
//simply fetch the progress of the current upload via AJAX
function checkProgress()
{
var xmlhttp;
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//call the function to update the progress bar visually
updateProgressBar(eval("("+xmlhttp.responseText+")")); //don't actually do this - it's unsafe
}
}
//send the request to uploader.php with the progress parameter present
xmlhttp.open("GET", "uploader.php?progress=<?php echo $sess_val; ?>", true);
xmlhttp.send();
}
//this function converts the JSON object of the progress into a visual progress bar
function updateProgressBar(response)
{
if(response['bytes_processed']==undefined) //this upload is finished
{
document.getElementById("progress-inner").style.width = "600px";
alert("Done!");
//we do not make another request for the progress since it's done
}
else
{
//calculate the new pixel width of the progress bar
var new_width = Math.round(response['bytes_processed'] / response['content_length'] * 600);
document.getElementById("progress-inner").style.width = new_width+"px";
checkProgress(); //make another request for the progress
}
}
//this function is called upon upload - it begins the progress checking
function beginUpload()
{
var t = setTimeout("checkProgress()", 2000); //wait a bit to leave enough time for initial upload to be sent
}
</script>
</head>
<body>
<div class="links">
<a href="index.php">Home</a>
<a href="about.html">About</a>
<a href="products.html">Products</a>
<a href="join.html">Join Us</a>
</div>
<div class="body">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<input type="hidden" value="<?php echo $current_month; ?>" name="month" id="month" />
<input type="hidden" name="date" id="date" size="2" value="<?php echo $current_date; ?>" />
<input type="hidden" value="<?php echo $current_year; ?>" name="year" id="year" />
<input type="hidden" name="time" id="time" size="5" value="<?php echo $current_time; ?>" /></p>
<p><label for="title">*Title:</label><input type="text" name="title" name="title" size="40" /></p>
<input type="text" name="uploaded_file" name="uploaded_file" value="<?php strip_tags($_POST['myFile']); ?>" size="70" />
<p>*Content:</p>
<p><textarea cols="80" rows="20" name="entry" id="entry"></textarea></p>
<p>
<input type="submit" name="submit" id="submit" value="Submit">
<input type="button" value="Cancel" onclick="window.location.href='index.php'">
</p>
</form>
<br /><br />
<p>Image Uploader: (h x w)(150 x 750)</p>
<form action="uploader.php" method="POST" enctype="multipart/form-data" target="submit-catch">
<input type="hidden" name="<?php echo $sess_name ?>" value="<?php echo $sess_val; ?>" />
<input type="file" name="myFile" />
<input type="submit" value="Upload" onclick="beginUpload();" />
</form>
<div id="progress-outer">
<div id="progress-inner"></div>
</div>
<iframe name="submit-catch" style="display:none;"></iframe>
</div>
<div class="footer">
<a href="http://www.youtube.com/user/GeekyGents/" target="_blank"><img src="images/icon/yt.png" /></a>
<a href="http://www.facebook.com/GeekyGents/" target="_blank"><img src="images/icon/fb.png" /></a>
<a href="https://twitter.com/GeekyGents/" target="_blank"><img src="images/icon/twitter.png" /></a>
</div>
</body>
</html>
Uploader.php
<?php
session_start(); //we need to be able to access the session
if(isset($_REQUEST['progress']) && isset($_SESSION['username'])) //getting the progress on an upload
{
//get the key of this particular upload - based on the passed parameter
$key = ini_get("session.upload_progress.prefix").$_REQUEST["progress"];
if(isset($_SESSION[$key]))
echo json_encode($_SESSION[$key]); //make it easy for our JavaScript to handle the progress data
else //the session doesn't exist, which means the upload has already finished or has not yet started
echo json_encode($key);
}
else //initial upload request
{
define("UPLOAD_DIR", "uploads/");
if (!empty($_FILES["myFile"])) {
$myFile = $_FILES["myFile"];
if ($myFile["error"] !== UPLOAD_ERR_OK) {
echo "<p>An error occurred.</p>";
exit;
}
// ensure a safe filename
$name = preg_replace("/[^A-Z0-9._-]/i", "_", $myFile["name"]);
// don't overwrite an existing file
$i = 0;
$parts = pathinfo($name);
while (file_exists(UPLOAD_DIR . $name)) {
$i++;
$name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
}
$fileType = exif_imagetype($_FILES["myFile"]["tmp_name"]);
$allowed = array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG);
if (!in_array($fileType, $allowed)) {
echo "<p>Wrong file type, please use GIF JPEG or PNG</p>";
}
else
{
// preserve file from temporary directory
$success = move_uploaded_file($myFile["tmp_name"],
UPLOAD_DIR . $name);
if (!$success) {
echo "<p>Unable to save file.</p>";
exit;
}
// set proper permissions on the new file
chmod(UPLOAD_DIR . $name, 0644);
}
}
}
?>
If you find anything else like security holes please do let me know about them as well, I'm learning.
it looks like you miss to set upload target for form, can you please give id "file_upload_form" to form and use below code.
function init() {
document.getElementById('file_upload_form').onsubmit=function() {
document.getElementById('file_upload_form').target = 'upload_target';
//'upload_target' is the name of the iframe
}
}
window.onload=init;