When I include an upload php-script in one of the ajax tabs, the script won't work. I can upload images but the uploaded image isn't written to the server, nor an error is showing. The page simply loads again with a fresh upload form.
The php script works perfectly on a normal page.
Also when providing a link in a tab to another tab (for example domain.com/#2) the url changes, but the second tab won't load. When loading domain.com/#2 directly in the browser (copy/paste) it does work.
... any suggestions? Normally this must work, isn't it?
Best,
Christophe
Last edited by Christophe27; 01-11-2010 at 06:55 PM.
You have no action property set in your form. In such cases, the form merely calls itself again.
Therefore, it works with your include method, because the include file has the necessary code to handle the upload.
But in the ajax tab page, there is no code to handle the upload. Think about it; the form calls the ajax tabs page, and that has no PHP on it to process your upload.
You probably want it to forward the upload via ajax to the php page, but this isn't possible - ajax doesn't do file uploads.
I hope the above is understandable. The reason is very simple but hard to explain.
<?php
// define a constant for the maximum upload size
define ('MAX_FILE_SIZE', 716800);
if (array_key_exists('upload', $_POST)) {
// define constant for upload folder
define('UPLOAD_DIR', '/path to image folder/');
// replace any spaces in original filename with underscores
// at the same time, assign to a simpler variable
$file = str_replace(' ', '_', $_FILES['image']['name']);
// convert the maximum size to KB
$max = number_format(MAX_FILE_SIZE/1024, 1).'KB';
// create an array of permitted MIME types
$permitted = array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/png');
// begin by assuming the file is unacceptable
$sizeOK = false;
$typeOK = false;
// check that file is within the permitted size
if ($_FILES['image']['size'] > 0 && $_FILES['image']['size'] <= MAX_FILE_SIZE) {
$sizeOK = true;
}
// check that file is of an permitted MIME type
foreach ($permitted as $type) {
if ($type == $_FILES['image']['type']) {
$typeOK = true;
break;
}
}
if ($sizeOK && $typeOK) {
switch($_FILES['image']['error']) {
case 0:
// $username would normally come from a session variable
$username = 'testfolder';
// if the user's subfolder doesn't exist yet, create it
if (!is_dir(UPLOAD_DIR.$username)) {
mkdir(UPLOAD_DIR.$username);
}
// check if a file of the same name has been uploaded
if (!file_exists(UPLOAD_DIR.$username.'/'.$file)) {
// move the file to the upload folder and rename it
$success = move_uploaded_file($_FILES['image']['tmp_name'], UPLOAD_DIR.$username.'/'.$file);
}
else {
// get the date and time
ini_set('date.timezone', 'Europe/London');
$now = date('Y-m-d-His');
$success = move_uploaded_file($_FILES['image']['tmp_name'], UPLOAD_DIR.$username.'/'.$now.$file);
}
if ($success) {
$result = "$file uploaded successfully";
}
else {
$result = "Error uploading $file. Please try again.";
}
break;
case 3:
$result = "Error uploading $file. Please try again.";
default:
$result = "System error uploading $file. Contact webmaster.";
}
}
elseif ($_FILES['image']['error'] == 4) {
$result = 'No file selected';
}
else {
$result = "$file cannot be uploaded. Maximum size: $max. Acceptable file types: gif, jpg, png.";
}
}
// if the form has been submitted, display result
if (isset($result)) {
echo "<p><strong>$result</strong></p>";
}
?>
<form action="" method="post" enctype="multipart/form-data" name="uploadImage" id="uploadImage">
<p>
<label for="image">Upload image:</label>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo MAX_FILE_SIZE; ?>" />
<input type="file" name="image" id="image" />
</p>
<p>
<input type="submit" name="upload" id="upload" value="Upload" />
</p>
</form>
The PHP is fine - it must be, it works fine using the include method.
But no, you can't upload files with ajax, or at least not without a lot of hacking and workaround. It's not generally done.
The workaround would be to simulate ajax using hidden iframes. Route your form through the a hidden iframe (e.g. make an iframe with name 'ifr' and give your form target='ifr').
Hidden iframes were the standard way of achieving the ajax effect before ajax itself became widely supported by the various browsers.
Hi,
I don't know if you guys are still active here, I would really appreciate it, if I can get some guidance.
I am doing something very similar to Christophe, but I am using a CMS that publishes pages and folders to a database.
I have three tabs on my page, each prints different page links from database. It's more like a filtered search.
Like group results in terms of categories or locations.Like that.
I am stuck at php part of it, any tips about how ajax can invoke php and pull up links from databases?
Reply With Quote
Bookmarks