Web Analytics Made Easy -
StatCounter PHP and JavaScript Error - CodingForum

Announcement

Collapse
No announcement yet.

PHP and JavaScript Error

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    Look at the source, what's it show in the links?

    Comment


    • #3
      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.

      Comment


      • #4
        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?
        PHP Code:
        header('HTTP/1.1 420 Enhance Your Calm'); 
        Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

        Comment


        • #5
          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

          Comment


          • #6
            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?

            Comment


            • #7
              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.

              Comment


              • #8
                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).
                PHP Code:
                header('HTTP/1.1 420 Enhance Your Calm'); 
                Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

                Comment


                • #9
                  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>

                  Comment


                  • #10
                    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
                    PHP Code:
                    header('HTTP/1.1 420 Enhance Your Calm'); 
                    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

                    Comment


                    • #11
                      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

                      Comment


                      • #12
                        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.
                        PHP Code:
                        header('HTTP/1.1 420 Enhance Your Calm'); 
                        Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

                        Comment


                        • #13
                          I'm confused. This code is working.
                          iPhone App Development | iPad App Developer | iPhone Development

                          Comment


                          • #14
                            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
                            "Tango says double quotes with a single ( ' ) quote in the middle"
                            '$Name says single quotes with a double ( " ) quote in the middle'
                            "Tango says double quotes ( \" ) must escape a double quote"
                            '$Name single quotes ( \' ) must escape a single quote'

                            Comment


                            • #15
                              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.
                              PHP Code:
                              header('HTTP/1.1 420 Enhance Your Calm'); 
                              Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

                              Comment

                              Working...
                              X