Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    PHP and JavaScript Error

    I am running everything on localhost.

    I made a page where you can upload pictures onto a folder on my computer called uploads. I tested that page and everything worked out fine, but when I try to make a table with links to the pictures that opens in a pop-up window, I get an error saying the requested URL was not found on the server.

    Here are my two codes:

    for uploading:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Upload an Image</title>
    	<style type="text/css" title="text/css" media="all">
    	.error {
    		font-weight: bold;
    		color: #C00
    	}
    	</style>
    </head>
    <body>
    <?php # Script 10.3 - upload_image.php
    
    // Check if the form has been submitted:
    if (isset($_POST['submitted'])) {
    
    	// Check for an uploaded file:
    	if (isset($_FILES['upload'])) {
    		
    		// Validate the type. Should be JPEG or PNG.
    		$allowed = array ('image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png');
    		if (in_array($_FILES['upload']['type'], $allowed)) {
    		
    			// Move the file over.
    			if (move_uploaded_file ($_FILES['upload']['tmp_name'], "C:/xampp/uploads/{$_FILES['upload']['name']}")) {
    				echo '<p><em>The file has been uploaded!</em></p>';
    			} // End of move... IF.
    			
    		} else { // Invalid type.
    			echo '<p class="error">Please upload a JPEG or PNG image.</p>';
    		}
    
    	} // End of isset($_FILES['upload']) IF.
    	
    	// Check for an error:
    	
    	if ($_FILES['upload']['error'] > 0) {
    		echo '<p class="error">The file could not be uploaded because: <strong>';
    	
    		// Print a message based upon the error.
    		switch ($_FILES['upload']['error']) {
    			case 1:
    				print 'The file exceeds the upload_max_filesize setting in php.ini.';
    				break;
    			case 2:
    				print 'The file exceeds the MAX_FILE_SIZE setting in the HTML form.';
    				break;
    			case 3:
    				print 'The file was only partially uploaded.';
    				break;
    			case 4:
    				print 'No file was uploaded.';
    				break;
    			case 6:
    				print 'No temporary folder was available.';
    				break;
    			case 7:
    				print 'Unable to write to the disk.';
    				break;
    			case 8:
    				print 'File upload stopped.';
    				break;
    			default:
    				print 'A system error occurred.';
    				break;
    		} // End of switch.
    		
    		print '</strong></p>';
    		
    	} // End of error IF.
    	
    	// Delete the file if it still exists:
    	if (file_exists ($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name']) ) {
    		unlink ($_FILES['upload']['tmp_name']);
    	}
    			
    } // End of the submitted conditional.
    ?>
    	
    <form enctype="multipart/form-data" action="upload_image.php" method="post">
    
    	<input type="hidden" name="MAX_FILE_SIZE" value="524288">
    	
    	<fieldset><legend>Select a JPEG or PNG image of 512KB or smaller to be uploaded:</legend>
    	
    	<p><b>File:</b> <input type="file" name="upload" /></p>
    	
    	</fieldset>
    	<div align="center"><input type="submit" name="submit" value="Submit" /></div>
    	<input type="hidden" name="submitted" value="TRUE" />
    </form>
    </body>
    </html>
    for the table:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Images</title>
    	<script language="JavaScript">
    	<!-- // Hide from old browsers.
    	
    	// Make a pop-up window function:
    	function create_window (image, width, height) {
    	
    		// Add some pixels to the width and height:
    		width = width + 10;
    		height = height + 10;
    		
    		// If the window is already open, 
    		// resize it to the new dimensions:
    		if (window.popup && !window.popup.closed) {
    			window.popup.resizeTo(width, height);
    		} 
    		
    		// Set the window properties:
    		var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height;
    		
    		// Set the URL:
    		var url = "show_image.php?image=" + image;
    		
    		// Create the pop-up window:
    		popup = window.open(url, "ImageWindow", specs);
    		popup.focus();
    		
    	} // End of function.
    	//--></script>
    </head>
    <body>
    <p>Click on an image to view it in a separate window.</p>
    <table align="center" cellspacing="5" cellpadding="5" border="1">
    	<tr>
    		<td align="center"><b>Image Name</b></td>
    		<td align="center"><b>Image Size</b></td>
    	</tr>
    <?php # Script 10.4 - images.php
    // This script lists the images in the uploads directory.
    
    $dir = 'C:/xampp/uploads'; // Define the directory to view.
    
    $files = scandir($dir); // Read all the images into an array.
    
    // Display each image caption as a link to the JavaScript function:
    foreach ($files as $image) {
    
    	if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period.
    	
    		// Get the image's size in pixels:
    		$image_size = getimagesize ("$dir/$image");
    		
    		// Calculate the image's size in kilobytes:
    		$file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb";
    		
    		// Make the image's name URL-safe:
    		$image = urlencode($image);
    		
    		// Print the information:
    		echo "\t<tr>
    \t\t<td><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td>
    \t\t<td>$file_size</td>
    \t</tr>\n";
    	
    	} // End of the IF.
        
    } // End of the foreach loop.
    ?>
    </table>
    </body>
    </html>
    That last code written with both PHP and JavaScript.
    This is what comes up when I click the links:

    Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404
    localhost
    8/24/2011 3:51:44 PM
    Apache/2.2.17 (Win32) mod_ssl/2.2.17 OpenSSL/0.9.8o PHP/5.3.4 mod_perl/2.0.4 Perl/v5.10.1

    Any help?

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Look at the source, what's it show in the links?

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Nightfire View Post
    Look at the source, what's it show in the links?
    It shows "http://localhost/show_image.php?image=Capture.PNG"

    Capture.PNG would just be the filename.

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    According to your error this file: http://localhost/show_image.php either doesn't exist or is triggering a 404. Paste that into your browser's address, does it do the same?

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fou-Lu View Post
    According to your error this file: http://localhost/show_image.php either doesn't exist or is triggering a 404. Paste that into your browser's address, does it do the same?
    Yes, but now for some reason, even in the pop-up window, there is a new error. It says:

    The image "http://localhost/show_image.php?image=IMG_0188.JPG" cannot be displayed because it contains errors.

    This comes up in the browser, and the pop-up window

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    How are you getting the images on show_image.php? Are you putting the image in a html file, or using the php page to create the image?

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Nightfire View Post
    How are you getting the images on show_image.php? Are you putting the image in a html file, or using the php page to create the image?
    The images are from a folder on my computer, and my code just goes to the folder and takes the pictures in it and makes a table.

  • #8
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Quote Originally Posted by michaelli321 View Post
    The images are from a folder on my computer, and my code just goes to the folder and takes the pictures in it and makes a table.
    No, we mean that the script itself is being served as an image type. We need to see the code to troubleshoot the problem (you're image resource is corrupt from the script's point of view).

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fou-Lu View Post
    No, we mean that the script itself is being served as an image type. We need to see the code to troubleshoot the problem (you're image resource is corrupt from the script's point of view).
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Images</title>
    	<script language="JavaScript">
    	<!-- // Hide from old browsers.
    	
    	// Make a pop-up window function:
    	function create_window (image, width, height) {
    	
    		// Add some pixels to the width and height:
    		width = width + 10;
    		height = height + 10;
    		
    		// If the window is already open, 
    		// resize it to the new dimensions:
    		if (window.popup && !window.popup.closed) {
    			window.popup.resizeTo(width, height);
    		} 
    		
    		// Set the window properties:
    		var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height;
    		
    		// Set the URL:
    		var url = "show_image.php?image=" + image;
    		
    		// Create the pop-up window:
    		popup = window.open(url, "ImageWindow", specs);
    		popup.focus();
    		
    	} // End of function.
    	//--></script>
    </head>
    <body>
    <p>Click on an image to view it in a separate window.</p>
    <table align="center" cellspacing="5" cellpadding="5" border="1">
    	<tr>
    		<td align="center"><b>Image Name</b></td>
    		<td align="center"><b>Image Size</b></td>
    	</tr>
    <?php # Script 10.4 - images.php
    // This script lists the images in the uploads directory.
    
    $dir = 'C:/xampp/uploads'; // Define the directory to view.
    
    $files = scandir($dir); // Read all the images into an array.
    
    // Display each image caption as a link to the JavaScript function:
    foreach ($files as $image) {
    
    	if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period.
    	
    		// Get the image's size in pixels:
    		$image_size = getimagesize ("$dir/$image");
    		
    		// Calculate the image's size in kilobytes:
    		$file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb";
    		
    		// Make the image's name URL-safe:
    		$image = urlencode($image);
    		
    		// Print the information:
    		echo "\t<tr>
    \t\t<td><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td>
    \t\t<td>$file_size</td>
    \t</tr>\n";
    	
    	} // End of the IF.
        
    } // End of the foreach loop.
    ?>
    </table>
    </body>
    </html>

  • #10
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Quote Originally Posted by michaelli321 View Post
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Images</title>
    	<script language="JavaScript">
    	<!-- // Hide from old browsers.
    	
    	// Make a pop-up window function:
    	function create_window (image, width, height) {
    	
    		// Add some pixels to the width and height:
    		width = width + 10;
    		height = height + 10;
    		
    		// If the window is already open, 
    		// resize it to the new dimensions:
    		if (window.popup && !window.popup.closed) {
    			window.popup.resizeTo(width, height);
    		} 
    		
    		// Set the window properties:
    		var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height;
    		
    		// Set the URL:
    		var url = "show_image.php?image=" + image;
    		
    		// Create the pop-up window:
    		popup = window.open(url, "ImageWindow", specs);
    		popup.focus();
    		
    	} // End of function.
    	//--></script>
    </head>
    <body>
    <p>Click on an image to view it in a separate window.</p>
    <table align="center" cellspacing="5" cellpadding="5" border="1">
    	<tr>
    		<td align="center"><b>Image Name</b></td>
    		<td align="center"><b>Image Size</b></td>
    	</tr>
    <?php # Script 10.4 - images.php
    // This script lists the images in the uploads directory.
    
    $dir = 'C:/xampp/uploads'; // Define the directory to view.
    
    $files = scandir($dir); // Read all the images into an array.
    
    // Display each image caption as a link to the JavaScript function:
    foreach ($files as $image) {
    
    	if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period.
    	
    		// Get the image's size in pixels:
    		$image_size = getimagesize ("$dir/$image");
    		
    		// Calculate the image's size in kilobytes:
    		$file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb";
    		
    		// Make the image's name URL-safe:
    		$image = urlencode($image);
    		
    		// Print the information:
    		echo "\t<tr>
    \t\t<td><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td>
    \t\t<td>$file_size</td>
    \t</tr>\n";
    	
    	} // End of the IF.
        
    } // End of the foreach loop.
    ?>
    </table>
    </body>
    </html>
    No, we need the code for this: show_image.php

  • #11
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fou-Lu View Post
    No, we need the code for this: show_image.php
    that is the code form show_image.php

  • #12
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    So now I'm confused. This page is show_image.php, which has the task to open a popup window back to itself? The image passed isn't handled in any way, so I'm not sure what you are hoping to do with this?

    The error you have posted indicates that show_image is pushing an image type header, but either not handling an image or pumping invalid binary. This script does not push a header for an image type, indicating that the above script is NOT show_image.php.

  • #13
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    I'm confused. This code is working.

  • #14
    Senior Coder
    Join Date
    Feb 2011
    Location
    Your Monitor
    Posts
    4,341
    Thanks
    60
    Thanked 527 Times in 514 Posts
    Blog Entries
    4
    You're confused? - I see no code anywhere that really handles the image yet it attempts to put the image file name out and link to an image outside and above the public directory
    See my new CodingForums Blog: http://www.codingforums.com/blogs/tangoforce/

    Many useful explanations and tips including: Cannot modify headers - already sent, The IE if (isset($_POST['submit'])) bug explained, unexpected T_CONSTANT_ENCAPSED_STRING, debugging tips and much more!

  • #15
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Okay. Lets try to clear the confusion up a bit first.
    This error: The image "http://localhost/show_image.php?image=IMG_0188.JPG" cannot be displayed because it contains errors. indicates that the script show_image.php directly on your document root is pushing a header for an image (ie: header('Content-type: image/png'); for example). But the data within it is not deemed to be an image.
    The script you have posted contains no such header, so it cannot be treated as an image. The error you receive I assume is when you try connecting to that address by typing it into the url (if you used an <img> tag, it should create one of the awesome broken link [x] boxes). Therefore, the script you have posted cannot be show_image.php, or at least not the show_image.php referred to directly off the document root.
    The script you have has code that has the job to open a new window to show the image:
    Code:
    		var url = "show_image.php?image=" + image;
    		
    		// Create the pop-up window:
    		popup = window.open(url, "ImageWindow", specs);
    Chances are that this page is not the same as the one you are requesting.

    We're looking for the page that's job is to hand that $image passed to it. It appears that it should be show_image.php.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •