It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I wonder whether someone could help me please.
I've really got myself in a bit of a pickle with this and I just seem to be going round in circles to find a solution.
I have created this modal dialog page to allow users to upload images. I would like to access this through the click of the 'Upload Images' button on this page.
The problem I have is two fold, but are linked.
I can't seem to get the modal dialog page to act as a pop dialog hovering over the parent page, instead it opens as another web browser page, and because I'm using two submit buttons, I can't get the 'submit' functionality to work independently i.e. one that submits the form, whilst the other opens up the modal dialog.
I've been working on this for quite some time now, changing the button types, giving specific name to each button and calling that in a Javascript function, but I just can't seem to find the solution.
I just wondered whether someone could perhaps have a look at this please and help me with this problem.
For ease, I've added the code below:
Modal Dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#dialog").dialog();
modal: true
//getter
var modal = $( ".dialog" ).dialog( "option", "modal" );
//setter
$( ".dialog" ).dialog( "option", "modal", true );
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="dialog">
</head>
<?php
//define a maxim size for the uploaded images
//define ("MAX_SIZE","100");
// define the width and height for the thumbnail
// note that theese dimmensions are considered the maximum dimmension and are not fixed,
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","150");
define ("HEIGHT","100");
// this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);
if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);
//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
// next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken:
// 1. calculate the ratio by dividing the old dimmensions with the new ones
// 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
// and the height will be calculated so the image ratio will not change
// 3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2) {
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else {
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}
// we create a new image with the new dimmensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename);
else
imagejpeg($dst_img,$filename);
//destroys source and destination images.
imagedestroy($dst_img);
imagedestroy($src_img);
}
// This function reads the extension of the file.
// It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an error occurs. If the error occures the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit']))
{
$title = ($_POST['title']);
if ($title == '') // if title is not set
$title = '(No Title Provided)';// use (empty title) string
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
// if it is not empty
if ($image == '')
{
echo '<b> Error! </b> - You <b> must </b> select a file to upload before selecting the <b> "Upload image" </b> button. Please try again.';
$errors=1;
}
else
if ($image)
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);
// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message
//and will not upload the file, otherwise we continue
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png"))
{
echo '<b> Error! </b> - The image that you attempted to upload is not in the correct format. The file format <b> must </b> be one of the following: <b> "jpg", "jpeg" </b> or <b> "png" </b>. Please try again.';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
$size=getimagesize($_FILES['image']['tmp_name']);
$sizekb=filesize($_FILES['image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > 1150000)
{
echo '<b> Error! </b> - The file that you are attempting to upload is greater than the prescribed <b> 1MB </b> limit. Please try again.';
$errors=1;
}
//we will give an unique name, for example the time in unix time format
$image_name=$title.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
$copied = copy($_FILES['image']['tmp_name'], $newname);
//we verify if the image has been uploaded, and print error instead
if (!$copied)
{
echo '<b> Error! </b> Your file has not been loaded';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name='images/thumbs/'.$image_name;
// call the function that will create the thumbnail. The function will get as parameters
//the image name, the thumbnail name and the width and height desired for the thumbnail
$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
}} }}
//If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors)
{
echo '<br><b> Success! </b> - Your image has been uploaded</br>';
echo '<img src="'.$thumb_name.'">';
}
?>
<!-- next comes the form, you must set the enctype to "multipart/form-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table>
<tr><td><input type="text" name="title" ></td></tr>
<tr><td><input type="file" name="image" ></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>
</form>
</div>
</html>
Parent Page Form Code
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="testdialog.php">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<p align="left"><label>Find Category</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM findcategories";
$result = mysql_query($query);
?>
<select name="findcategory" id="findcategory">
<option value=''>Select a Find Category</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['findcategory'];?>"> <?php echo $line['findcategory'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">Find Name</p>
<div>
<div align="left">
<input name="findname" type="text" id="findname" size="35" />
</div>
</div>
<p align="left"> Find Description</p>
<div>
<div align="left">
<input name="finddescription" type="text" id="finddescription" size="150" />
</div>
</div>
<p align="left">
<label> Detector Used</label>
</p>
<div>
<div align="left">
<select id="detectorname" name="detectorname" onchange="getTextList(this)">
<option value="">Select a Detector</option>
<?php
// QUERY DATABASE TO GET CATEGORIES
$query = mysql_query("SELECT detectorid, detectorname FROM detectors ORDER BY detectorname ASC") or die(mysql_error());
// LOOP THROUGH ROWS RETURNED TO CREATE SELECT BOX
while($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['detectorid'].'">'.$row['detectorname'].'</option>';
}
?>
</select>
</div>
</div>
<p align="left">
<label>Search Head Used<br />
</label>
</p>
<div>
<div align="left">
<select id="searchheadname" name="searchheadname">
</select>
</div>
</div>
</div>
<p align="left">
<label>Detector Settings</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"></textarea>
</div>
</div>
<p align="left">
<label>PAS Ref. (if known)<br />
</label>
</p>
<div>
<div align="left">
<input name="pasref" type="text" id="pasref" size="9" />
</div>
</div>
<p align="left"><label>Additional Comments</label>
</p>
<div>
<div align="left">
<textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"></textarea>
</div>
</div>
</p>
<p>
<label>
<div align="left">
<input name="uploadimages" type="submit" id="uploadimages" value="Upload Image(s)"/>
</div>
</label>
</p>
<p align="left"><label>Do you wish to make this find public?<br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM makepublicoptions";
$result = mysql_query($query);
?>
<select name="makepublic" id="makepublic">
<option value=''>Choose 'Yes' or 'No'</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['publicoption'];?>"> <?php echo $line['publicoption'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">
<input name="submit" type="submit" value="Submit" />
</form>
Sincere thanks and regards
Try this:
HTML
Use a <button> element isntead of a submit button. Forms should never have more than one 'submit' button.
<button name="uploadimages" type="button" id="uploadimages">Upload Image(s)</button>
JS
$(function() { // Is the same as $(document).ready(function() {
$('#uploadimages').on('click', function() {
$("#dialog").dialog({
modal: true
});
});
});
Javascript has three modal dialogs - alert(), confirm() and prompt(). What you need is a psuedo-dialog box, that essentially disables the page below and shows some custom HTML.
The jQuery UI plug in has some nice features that will let you do this with a minimum of code (see http://jqueryui.com/demos/dialog/ for an example of jQuery dialogs).
Once the HTML for your dialog is on the same page as your app, you should be all set for getting your submits and such working, since they'll all be in the same window.
Related
I want to save images in mysql using PHP
but I keep getting an error saying Fatal error: Call to undefined function saveimage() in D:\xampp\htdocs\PHPv2.0\Clients\subreqv2.php on line 100
And this is my code:
<body>
<form method="post" enctype="multipart/form-data">
<br/>
<!-- img1 file browser -->
<div>
<input type="file" name="image1"/>
<br/>
</div>
<!-- img2 file browser -->
<div>
<input type="file" name="image2"/>
<br/>
</div>
<!-- img3 file browser -->
<div>
<input type="file" name="image3"/>
<br/>
</div>
<!-- img4 file browser -->
<div>
<input type="file" name="image4"/>
<br/>
</div>
<!-- img5 file browser -->
<div>
<input type="file" name="image5"/>
<br/>
</div>
<!-- img6 file browser -->
<div>
<input type="file" name="image6"/>
<br/>
</div>
<!-- img7 file browser -->
<div>
<input type="file" name="image7"/>
<br/>
</div>
<input type="submit" name="sumit" value="Upload">
</form>
<?php
if(isset($_POST['sumit']))
{
if(getimagesize($_FILES['image1']['tmp_name'])== FALSE)
{
echo "Please select an image.";
}
else
{
$image1=addslashes($_FILES['image1']['tmp_name']);
$name1=addslashes($_FILES['image1']['name']);
$image1=file_get_contents($image1);
$image1=base64_encode($image1);
$image2=addslashes($_FILES['image2']['tmp_name']);
$name2=addslashes($_FILES['image2']['name']);
$image2=file_get_contents($image2);
$image2=base64_encode($image2);
$image3=addslashes($_FILES['image3']['tmp_name']);
$name3=addslashes($_FILES['image3']['name']);
$image3=file_get_contents($image3);
$image3=base64_encode($image3);
$image4=addslashes($_FILES['image4']['tmp_name']);
$name4=addslashes($_FILES['image4']['name']);
$image4=file_get_contents($image4);
$image4=base64_encode($image4);
$image5=addslashes($_FILES['image5']['tmp_name']);
$name5=addslashes($_FILES['image5']['name']);
$image5=file_get_contents($image5);
$image5=base64_encode($image5);
$image6=addslashes($_FILES['image6']['tmp_name']);
$name6=addslashes($_FILES['image6']['name']);
$image6=file_get_contents($image6);
$image6=base64_encode($image6);
$image7=addslashes($_FILES['image7']['tmp_name']);
$name7=addslashes($_FILES['image7']['name']);
$image7=file_get_contents($image7);
$image7=base64_encode($image7);
saveimage();
}
}
//displayimage();
function saveimagesaveimage($name1,$image1,$name2,$image2,$name3,$image3,$name4,$image4,$name5,$image5,$name6,$image6,$name7,$image7)
{
$con=mysql_connect("localhost","root","");
mysql_select_db("dummy",$con);
$qry="INSERT INTO images (name1,image1,name2,image2,name3,image3,name4,image4,name5,image5,name6,image6,name7,image7) VALUES ('$name1','$image1','$name2','$image2','$name3','$image3','$name4','$image4','$name5','$image5','$name6','$image6','$name7','$image7')";
$result=mysql_query($qry,$con);
if($result)
{
echo "<br/>Image successfully uploaded.";
}
else
{
echo "<br/>Error in uploading image.";
}
}
/* function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("dummy",$con);
$qry="SELECT * FROM images";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
echo '<img height="100" width="100" src="data:image;base64,'.$row['image'].'">';
}
}
*/
?>
</body>
Can anyone point out to me where did I go wrong?
Note: nevermind the use of mysql instead of msqli or PDO I just have to make this work so I could base my main project here.
Thanks for the help in advance. I'll appreciate it.
At the end you are calling saveimage() function, while in the code you have written the function name saveimagesaveimage().
Not only that you are passing many parameters to the function where it is initialised but where you are calling the saveimage() function even with the wrong name, no parameters are passed to it.
OK, so here's my code. (I'll sanitize it later. Don't worry about it.)
gallery_upload_new.php
// Check if user wants to upload to existing or new album
if (isset($_POST['album'])) {
if ($_POST['album'] == '') {
$_POST['album'] = $_POST['new_album'];
}
}
// Populate album dropdown menu
$albums = $database->query("SELECT DISTINCT(album) FROM images")->fetchAll(PDO::FETCH_COLUMN);
// Load the 'upload new photo' interface if user's not uploading it already
if (!isset($_FILES['image_link']) || !isset($_POST['caption']) || $_POST['caption'] == '') {
//var_dump($_FILES);
//var_dump($_POST);
include('views/gallery_upload_new.php');
// Otherwise store the image file, register it into database, and put the user back in the list of photos
} else {
$new_image = new Image($_POST['caption'], $_POST['album']);
$new_image->register($_FILES['image_link']['tmp_name'], $_FILES['image_link']['name']);
header('location: gallery_management.php');
}
?>
views/gallery_upload_new.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $site_title; ?></title>
<?php include('views/header.php'); //Just the global CSS and JavaScript ?>
</head>
<body>
<?php include('views/nav_menu.php'); //Site navigation panel ?>
<div id="content">
<h1>Upload new photo</h1>
<form enctype="multipart/form-data" action="gallery_upload_new.php" method="post">
<p>
<strong>Upload to album: </strong>
<select name="album">
<?php
foreach($albums as $album_name) {
echo "<option value='$album_name'>$album_name</option>";
}
?>
<option id="selectNewAlbum" value="" selected>New album</option> <input type="text" placeholder="New album name" name="new_album" id="newAlbumName">
</select>
</p>
<p><strong>Photo caption</strong> <input type="text" name="caption"></p>
<p><strong>Photo file: </strong><input type="file" required name="image_link"></p>
<input type="submit" value="Unggah">
</form>
</div>
</body>
</html>
Here's the weird part: without those two var_dump's up there, the else block won't execute. I've made sure the indexes in the $_POST and $_FILES are correct. Yet without those dummy dumps, this thing won't work. It'd just load the views/gallery_upload_new.php no matter what.
It doesn't even matter if they're commented out or not. They just need to be there.
What did I do wrong? Did I made a syntax error somewhere?
I have some forms in php that upload data into a mysql database. I have already tested on a localhost server with xampp, but when I upload my files into my host ftp, the forms do not work. I think it has something to do with the fact that I put this file and also the "connect.php" file under password restriction, and that has something to do with the file permissions. I've already granted permission to the user of the database and permission to the file and I also had tried without the password protection, but the result is the same.
So I start to experiment a little and I figured out that the image uploads fine into the database but the other inputs don't, neither the "header" input nor the "article" textarea... knowing that, I tried to "echo out" these input results but none of them show something unless the image input. I came to the conclusion that my form is sending empty data. Can someone make suggestions as to what is happening and how to fix it? Here's my code:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="slider_upload">
<h1>Slider principal</h1>
<div class="forma">
<form action="sliderPrincipal.php" method="post" enctype="multipart/form-data">
<p><label for="header">Header</label>
<input type="text" id="header" name="header" /></p><br>
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<p><label for="fileupload">File to upload</label>
<input type="file" id="fileupload" name="fileupload" /></p><br>
<p><label for="article">article</label>
<textarea id="article" name="article" rows="26" style="width: 100%;" >Write here</textarea></p><br>
<button type="submit" name="submit" value"send">Upload File</button>
</form><br><br>
</div>
</div>
<div class="message">
<?php
$file_dir = "../uploaded";
if (isset($_POST['header'])){
$header = mysql_real_escape_string($_POST['header']);
$article = mysql_real_escape_string($_POST['article']);
}
foreach($_FILES as $file_name => $file_array){
//echo "path: ".$file_array['tmp_name']."<br />\n";
//echo "name: ".$file_array['name']."<br/>\n";
//echo "type: ".$file_array['type']."<br/>\n";
//echo "size: ".$file_array['size']."<br/><br/>\n";
//echo "encabezado ".$encabezado;
if(is_uploaded_file($file_array['tmp_name'])){
move_uploaded_file($file_array['tmp_name'], "$file_dir/".$file_array['name']) or die ("Your image couldnt be uploaded <br>");
$newpath = addslashes("uploaded/".$file_array['name']);
include "connect.php";
$addfile = "INSERT INTO slider (header, image, article) VALUES ('$header','$newpath', '$article')";
$result = mysql_query($addfile);
if ( $result === FALSE ) {
echo "your post could not be uploaded but we already got your image in our files ";
} else{
echo '<p style="padding: 20px;"><h1>Your post was successfully uploaded <h2></p><br><br>';
}
mysql_close();
} else "No file found";
}
?>
</div>
</div>
</body>
</html>
I'm writing a small PHP script to add some data in to a MySQL database. I'm using jQuery to send my text data to the processing PHP file which will put the data in to the MySQL data base that part is ok and working with out any issue.
But in this same form I need to upload a file to a folder in the server and save that path or the file name in to the database column "Img".
I've searched through the Stack site but didn't get any clue how to do this. If jQuery can't do this please tell me how to archive this with out loosing the text submission part. I'm going to list my code here.
My process PHP:
include ('connect.php');
$data = ("SELECT * FROM poiinfo");
$poiName = $_REQUEST['Name'];
$poiDes = $_REQUEST['Descrip'];
$poiCon = $_REQUEST['ConInfo'];
/*$poiImg = $_REQUEST['Image']; */ <-- my Image data but this is not the way need correct this
$dbData = "INSERT INTO poiinfo(`Name`, `Des.`, `Contact`) VALUES ('$poiName','$poiDes','$poiCon')";
$putData = mysql_query($dbData);
if ($putData){
echo "Data inserted";
}else {
echo "Not Done";
}
My form:
<?php
/**
* #author SiNUX
* #copyright 2013
*/
include ('connect.php');
$lastId = mysql_query("SELECT ID FROM poiinfo ORDER BY ID DESC LIMIT 1");
if ($row = mysql_fetch_array($lastId)){
$nId = $row['ID'];
$nId == "0";
$nId = $nId++;
mysql_quary("INSERT INTO poiinfo ('ID') VALUES ('$nId')");
}else {
$lId = $row['ID'];
$lId = $lId + 0;
$lId++;
$tId = $lId;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#save_data").click(function(){
var name = document.getElementById("Name").value;
var desc = document.getElementById("Descrip").value;
var con = document.getElementById("ConInfo").value;
var dataString = 'Name='+name+'&Descrip='+desc+'&ConInfo='+con;
$.ajax({
type:'POST',
data:dataString,
url:'AddPoiPro.php',
success:function(data){
if(data="Data inserted") {
//alert("Data Success");
document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: #060\">Data Saved</dive>";
$('#msg').delay(1500).fadeOut();
} else {
//alert("Not Inserted");
document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: red\">Data Not Saved</div>";
}
}
});
});
});
</script>
<title>AddPOI</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="form1" id="form1">
<p>
<label for="poiid">ID :</label>
<input type="text" name="poiid" id="poiid" readonly="readonly" style="width:70px;" value="<?php echo $tId; ?>" />
</p>
<p>
<label for="Name">POI Name :</label>
<input type="text" name="Name" id="Name" />
</p>
<p>
<label for="Descrip" style="alignment-adjust:middle">POI Description :</label>
<textarea name="Descrip" id="Descrip" cols="45" rows="5"></textarea>
</p>
<p>
<label for="ConInfo">Contact Infomation :</label>
<textarea name="ConInfo" id="ConInfo" cols="45" rows="5"></textarea>
</p>
<p>
<label for="Img">POI Image :</label>
<!--<input type="file" name="Image" id="Image" /> --> <-- File upload place but for now it's commented out.
</p>
<p><div id="msg"></div></p>
<p>
<div align="center">
<input type="button" name="Submit" id="save_data" value="Submit" style="width:100px;" />
<input type="reset" name="reset" id="reset" value="Rest Data" style="width:100px;" />
</div>
</p>
</form>
</body>
</html>
Please help me as I said in most post's I saw that AJAX or jQuery can't handle the file upload so if there way to do it please educate me.
Also you guys are guru of coding I'm just a grasshopper so is this good coding or do I need to improve more on my style and also in the above form I have the ajax part in the header should I move it to another file and link it to the form.
Unfortuanately, for security reasons, you cannot upload a file via AJAX. (Can you imagine what would happen if JavaScript could access your file system?)
The way round this is to use a form with the target attribute set to an invisible iframe. This will achieve a file upload without refreshing the page.
You may find this post useful.
I can't get the image to save in the /image_upload/uploads/ folder (then I can hopefully figure out the rest).
This is the code I got from parorrey.com
<?php
//remote image to copy
$remoteImageURL = 'http://www.mywebsite.com/image.jpg'; //I'm not sure what URL should be here
//local directory to store image
$dir_path = 'http://www.mywebsite.com/image_upload/uploads/';
if($remoteImageURL)
{
require_once('class.get.image.php');
// initialize the class
$image = new GetImage;
// just an image URL
$image->source = $remoteImageURL;
$image->save_to = $dir_path; // with trailing slash at the end
$get = $image->download('curl'); // using cURL
$pic = $dir_path.basename($remoteImageURL);
//you can use the picture path e.g. Insert into DB from this variable $pic
?>
This is some of the code for the PICUP application
<script>
var currentParams = {}
document.observe('dom:loaded', function()
{
$(document.body).addClassName('iphone');
// We'll check the hash when the page loads in-case it was opened in a new page
// due to memory constraints
Picup.checkHash();
// Set some starter params
currentParams = {
'callbackURL' : 'http://mywebsite.com/upload_pic5.php',
'postURL' : 'http://www.mywebsite.com/image_upload/picup_remote_image.php',
'referrername' : escape('mywebsite'),
'referrerfavicon' : escape('http://mywebsite.com/kwboat.ico'),
'purpose' : escape('Select your photo for our App.'),
'debug' : 'false',
'returnThumbnailDataURL': 'true',
'thumbnailSize' : '150'
};
Picup.convertFileInput($('photo'), currentParams);
});
</script>
<script type="text/javascript">
window.name = "fileupload";
</script>
This is my form code
<form action="save.php" method="post" id="add_boat">
<div class="step_bar_info">Upload a Picture of your boat</div>
<div id="image_box">
<div id="upload_area">
<?php if (isset($image_url))
{
echo '<img src="' . $image_url .'" />';
}
else
{
echo '<img src="images/boat.png" width="150px"/>';
} ?>
</div>
<input type="file" name="photo" id="photo"/><br />
Please select your photo to upload, you will need to install Picup App (Free) from iTunes. <br /><br /> Picup is a free iPhone app that facilitates photo uploads to our web app. Since Mobile Safari doesnt support file-upload form fields
<?php $image_url=($pic); ?><!-- gets from image processor though maybe should just change $pic -->
</div><!--image box-->
<input type="hidden" id="image_url" name="image_url" value="images/boat.png"/>
<div id="titlebox">Boats name<br/><input name="title" type="text" size="24" maxlength="60" value="" tabindex="1"></div><!--endtitlebox-->
<div id="info_box">Info<br/><textarea name="info" cols="20" maxlength="100" rows="2" tabindex="6"></textarea></div>
<input id="add_boat" type="submit" name="add_boat" value="save " alt="submit" title="Save item in our secure database system " />
</form>
Just from looking at your code I would like to say. If your choose file button is not showing up on your form.
In the picup currentParams. Picup.convertFileInput($('photo'), currentParams);
"photo" is intended to be your id="" name="" not "image_url"
Try
// initialize the class
$image = new GetImage();
Or its a typo?