PHP - Php/ajax File Upload
Is this possible? Can you read the contents of a file on a persons computer if they select it with a INPUT TYPE="FILE" html element and then send it via AJAX POST?
Similar TutorialsI'm trying to upload a file using ajax, but I have some problems. First I'll show the code : HTML Code: [Select] <form id="foto" action="index.php?action=send" method="post" enctype="multipart/form-data"> <fieldset> <label>Kleur</label> <input id="Binded" type="text" value="ffffff" /> <br /> <label>Upload foto</label> <input id="file" type="file" name="upload" id="upload"/> <a href="index.php?action=foto" id="uploaden">uploaden</a> </fieldset> <fieldset id="audioplayer"> <h3>Kies een soundtrack</h3> <ol id="lijst"> <li id="een" class="active"><a href="assets/audio/Gayla_Peevey-I_Want_a_Hippopotamus_For_Christmas.mp3">Gayla Peevey - I Want a Hippopotamus For Christmas</a> <img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li> <li id="twee"><a href="assets/audio/SouthFamilyXmas2005-NuttinForChristmas.mp3">South Family - Nuttin for Christmas</a> <img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li> <li id="drie"><a href="assets/audio/southpark_merry_christmas.mp3">South Park - Merry Christmas</a> <img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li> </li> </ol> <audio id="audio" preload="auto" autobuffer autoplay src="assets/audio/Gayla Peevey - I Want a Hippopotamus For Christmas.mp3"> </audio> </fieldset> <fieldset id="emailen"> <h3>Email een vriend</h3> <br /> <input type="email" name="email" placeholder="Email" required="true" /> <input type="submit" name="verstuur" id="verstuur" value="Verstuur" /> </fieldset> </form> PHP Code: [Select] function getAjaxContent(){ global $smarty; $dir = "uploads"; $tempdir = $_FILES['upload']["tmp_name"]; $realdir = $dir."/".$_FILES["upload"]["name"]; //$fotoTonen = '<img src="'.$realdir.'" alt="foto upload">'; //$toonFoto = true; if(!is_dir($dir)){ mkdir($dir); } move_uploaded_file($tempdir, $realdir); var_dump($_FILES); return $smarty->fetch('kaart-ajax.htm'); }Here I get the error <b>Notice</b>: Undefined index: upload in <b>/Applications/MAMP/htdocs/2011-2012/kerstkaart/includes/index.php</b> on line <b>16</b><br /> and the var_dump gives an empty array AJAX Code: [Select] $('input[name=foto]').change(function(event){ $.ajax({ url:"index.php?action=foto", data: $('input[type=file]').val(), type: "POST", timeout: 3000, error: function(jqXHR, textStatus,errorThrown){ alert("probleem met ajax "+textStatus); }, success: function(data, textStatus, jqXHR){ alert("jaja "+data); canvas.width = canvas.width; context.drawImage(image, 0, 0); image.src = 'uploads/'+data; } }); event.preventDefault(); }); What I try to do here is getting the value of the selected file and redraw my canvas ( HTML5 ) so that the chosen pic is the background. The file i upload to test is a gif of 4KB, so not that big. Can anyone help me with this confusing problem ? Thanks, Hi. I have a page that allows users to upload some files, using <input type="file">... What I would like is to be able to upload the file "onchange" of this input field using ajax so that (1) users can upload their second file while their first one is uploading, and (2) so that they can see their file on the page as soon as it's done uploading. But I can't seem to find a way to populate the $_FIlLES array without actually submitting the form. I've seen some stuff online where people use iframes to do this kind of thing, but I was hoping there was another way to do it. Any help would be great. files that upload during insert/submit form was gone , only files upload during the update remain , is the way query for update multiple files is wrong ? $targetDir1= "folder/pda-semakan/ic/"; if(isset($_FILES['ic'])){ $fileName1 = $_FILES['ic']['name']; $targetFilePath1 = $targetDir1 . $fileName1; //$main_tmp2 = $_FILES['ic']['tmp_name']; $move2 =move_uploaded_file($_FILES["ic"]["tmp_name"], $targetFilePath1); } $targetDir2= "folder/pda-semakan/sijil_lahir/"; if(isset($_FILES['sijilkelahiran'])){ $fileName2 = $_FILES['sijilkelahiran']['name']; $targetFilePath2 = $targetDir2 . $fileName2; $move3 =move_uploaded_file($_FILES["sijilkelahiran"]["tmp_name"], $targetFilePath2); } $targetDir3= "folder/pda-semakan/sijil_spm/"; if(isset($_FILES['sijilspm'])){ $fileName3 = $_FILES['sijilspm']['name']; $targetFilePath3 = $targetDir3 . $fileName3; $move4 =move_uploaded_file($_FILES["sijilspm"]["tmp_name"], $targetFilePath3); } $query1=("UPDATE semakan_dokumen set student_id='$noMatrik', email= '$stdEmail', surat_tawaran='$fileName', ic='$fileName1',sijil_lahir='$fileName2',sijil_spm= '$fileName3' where email= '$stdEmail'");
I found this code online, it works fine but i dont know where i should put the SQL statement to place the image path onto my database. Here is what i have...the SQL statement i place them at doesnt work. Any suggestions? <?php function resizeImg($arr){ //you can change the name of the file here $date = md5(time()); //////////// upload image and resize $uploaddir = $arr['uploaddir']; $tempdir = $arr['tempdir']; $temp_name = $_FILES['photo']['tmp_name']; //echo $temp_name; $img_parts = pathinfo($_FILES['photo']['name']); $new_name = strtolower($date.'.'.$img_parts['extension']); $ext = strtolower($img_parts['extension']); $allowed_ext = array('gif','jpg','jpeg','png'); if(!in_array($ext,$allowed_ext)){ echo '<p class="uperror">Please upload again. Only GIF, JPG and PNG files please.</p>'; exit; } $temp_uploadfile = $tempdir . $new_name; $new_uploadfile = $uploaddir . $new_name; // less than 1.3MB if($_FILES['photo']['size'] < 2097000 ){ if (move_uploaded_file($temp_name, $temp_uploadfile)) { // add key value to arr $arr['temp_uploadfile'] = $temp_uploadfile; $arr['new_uploadfile'] = $new_uploadfile; asidoImg($arr); unlink($temp_uploadfile); exit; } } else { echo '<p class="uperror">Please upload again. Maximum filesize is 1.3MB.</p>'; exit; } } function resizeThumb($arr){ $date = md5(time()); $arr['temp_uploadfile'] = $arr['img_src']; $arr['new_uploadfile'] = $arr['uploaddir'].strtolower($date).'.jpg'; asidoImg($arr); exit; } function asidoImg($arr){ include('asido/class.asido.php'); asido::driver('gd'); $height = $arr['height']; $width = $arr['width']; $x = $arr['x']; $y = $arr['y']; // process $i1 = asido::image($arr['temp_uploadfile'], $arr['new_uploadfile']); // fit and add white frame if($arr['thumb'] === true){ Asido::Crop($i1, $x, $y, $width, $height); } else{ Asido::Frame($i1, $width, $height, Asido::Color(255, 255, 255)); } // always convert to jpg Asido::convert($i1, 'image/jpg'); $i1->Save(ASIDO_OVERWRITE_ENABLED); $data = array( 'photo'=> $arr['new_uploadfile'] ); // echo $user_id; // delete old file echo $data['photo']; } ?> Hi
Ultimate Aim: To upload multiple images using ajax using a PHP script which will be fired once an image is selected and then return the resulting URL for use in rest of my JS http://peter-gosling...hooseimage.html simple form posts to http://peter-gosling...d/saveimage.php This PHP script below currently gets the posted image and assigns it a random number file name and echos this <?php header("Access-Control-Allow-Origin: *"); $uploaddir = '/home/petergos/public_html/testupload/images/'; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); $urlpath = "http://www.peter-gosling.co.uk/testupload/images/"; $temp = explode(".",$_FILES["userfile"]["name"]); $newfilename = rand(1,999999999) . '.' .end($temp); $newuploadfile = $uploaddir . $newfilename; echo "<p>"; if (move_uploaded_file($_FILES['userfile']['tmp_name'], $newuploadfile)) { $urlfile = $urlpath . $newfilename; echo $urlfile; } else { echo "Upload failed"; } ?>What I want to do is post my image via ajax but return the value back to my js file I'm not certain on the CORS issue Here's my first attempt http://peter-gosling.com/testupload/ HTML <!DOCTYPE html> <html> <head> </head> <body> <input type="file" accept="image/*;capture=camera" name="taskoutputfile"></input> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $("input[name=taskoutputfile]").on("change", function (){ var fileName = $(this).val(); console.log(fileName); get_image_url(fileName) }); //UPLOAD IMAGE RETURN URL function get_image_url(imageurl) { var dataString = "url="+imageurl; //datastring = $("input[name=sessiontitle]").val(); //AJAX code to submit form. $.ajax({ type: "POST", url: "http://www.peter-gosling.co.uk/testupload/saveimage2.php", data: dataString, cache: false, success: function(html) { alert(html); } }); } </script> </body> </html>PHP <?php header("Access-Control-Allow-Origin: *"); $uploaddir = '/home/petergos/public_html/testupload/images/'; $uploadfile = $uploaddir . basename($_POST['url']); $urlpath = "http://www.peter-gosling.co.uk/testupload/images/"; $temp = explode(".",$_POST['url']); $newfilename = rand(1,999999999) . '.' .end($temp); $newuploadfile = $uploaddir . $newfilename; echo "<p>"; if (move_uploaded_file($_FILES['userfile']['tmp_name'], $newuploadfile)) { $urlfile = $urlpath . $newfilename; return $urlfile; } else { echo "Upload failed"; } /* echo "</p>"; echo '<pre>'; echo 'Here is some more debugging info:'; print_r($_FILES); print "</pre>"; */ ?>Have attached all files Any help would be really appreciated Thankyou I apologize if I am using the wrong terminology here... I am trying to take an image that is dragged and dropped and then uploading the image to a server to do other things with it. I've found very generic example(s) that can just move the file, but I need to be able to manipulate it on the server. AJAX cut-out code: Code: [Select] var xhr = new XMLHttpRequest(); if(xhr.upload && file.type == 'image/jpeg' || file.type == 'image/png'){ xhr.open('POST', 'path/to/script.php', true); xhr.setRequestHeader('X_FILENAME', file.name); xhr.send(file); }The above part works but when I try to manipulate it with PHP it doesn't see it as a typical $_FILES variable. Ideally I would like to get it to be like that, if not I understand I will have to change stuff. Here is my PHP that handles the above call: Code: [Select] <?php $slide = new Slide(); //echo gettype($_SERVER['HTTP_X_FILENAME']); //str $file = file_get_contents('php://input'); $image = base64_decode($file); if($slide->add_image_to_slide($_GET['sid'],$image)){ echo 'yay'; }else{ echo $slide->error; } Object Code: Code: [Select] <?php public function add_image_to_slide($id,$image){ //Verify image before proceeding forward $accepted_file_types = array('jpg','png'); $ext = explode('.',$image['name']); if(array_search($ext[1],$accepted_file_types) !== false) { //variables $this->id = $id; $this->select_slide($this->id); //make sure that the folders for the images to go actually exist, if not, create them $this->create_folders(); $this->generate_thumbnail($image); $this->thumbnail = $this->upload_directory.$this->rand_id.'_thumb_'.$this->filename; $this->full_img = $this->upload_directory.$this->rand_id.'_'.$this->filename; // thumbnail is moved automatically by function above, just move full image move_uploaded_file($image['tmp_name'], BASE_ROOT.'/'.$this->full_img); if($stmt = $this->_db->prepare('UPDATE slides SET full_img = ? , thumbnail = ? WHERE id = ?')){ $stmt->bind_param('ssi',$this->full_img,$this->thumbnail,$id); $stmt->execute(); $stmt->close(); return true; } return false; } $this->error = 'File Extension Error: .jpg, .png allowed only'; return false; } Right now it's skipping straight to $this->error since it's not an image object. I'm not really sure what to pursue from here. I did try this line once but it also skipped to the error line: Code: [Select] <?php $image = createimagefromstr(file_get_contents('php://input')); Any help would be greatly appreciated! Thanks, Justin In this multi file upload form, choose three images, click submit and preview the images on the preview page. If the user wishes to delete or replace an image, click edit and the form will go back to the previous page. Select the replace radio button for example on one of the three images and select a new image from the file input prompt and click submit. The form will go to the preview page again to display the images. During this process the image names are being input into a table and the images are being moved to a directory. The table is `id` AUTO_INCREMENT, `image0` `image1` `image2` `status` So input name='image[image0]' can be directed to table `image0` and so on. The code for keep and delete work fine, but how do I replace an image? I have two foreach blocks. The first one deletes the image file from the directory and deletes the image name from the table, but the second foreach dose not move the new image file into the directory. Thanks. <input type='radio' name='image[image0]' value='keep' checked='checked'/> <input type='radio' name='image[image0]' value='delete' /> <input type='radio' name='image[image0]' value='replace' /> <input type="file" name="image[]" /> <input type='radio' name='image[image1]' value='keep' checked='checked'/> <input type='radio' name='image[image1]' value='delete' /> <input type='radio' name='image[image1]' value='replace' /> <input type="file" name="image[]" /> <input type='radio' name='image[image2]' value='keep' checked='checked'/> <input type='radio' name='image[image2]' value='delete' /> <input type='radio' name='image[image2]' value='replace' /> <input type="file" name="image[]" /> <?php if (isset($_POST['status'])) { $status = $_POST['status']; $confirm_code = $status; #--------------------------- replace -------------------------------------------- if (isset($_POST['submitted']) && ($image = $_POST['image'])) { foreach($image as $imageKey => $imageValue) { if ($imageValue == 'replace') { $query = "SELECT $imageKey FROM table WHERE status = '$status' "; if($result = $db->query( $query )){ $row = $result->fetch_array(); } unlink( UPLOAD_DIR.$row[0] ); $query = "UPDATE table SET $imageKey = '' WHERE status = '$status' "; } } foreach($image as $imageKey => $imageValue) { if ($imageValue == 'replace') { $filenm = $_FILES['image']['name']; $file = $_FILES['image']['tmp_name']; move_uploaded_file($file, UPLOAD_DIR . $filenm); $filename[] = $filenm; $query = "INSERT INTO table VALUES ('','$filename[0]','$filename[1]','$filename[2]','$confirm_code')"; } } } } ?> Hiya, Firstly, I'm a complete novice, apologies! But I have got my upload.php working which is nice. I will post the code below. However, I would now like to restrict the file size and file type to only word documents. I currently have a restriction of 200KB but it's not working - no idea why as I've looked at other similar codes and they look the same. Also, just to complicate things - can I stop files overwriting each other when uploaded? At the moment, if 2 people upload files with the same name one will overwrite the other. Is this too many questions in 1? Any help is very much appreciated! Code below: Code: [Select] <form enctype="multipart/form-data" action="careers.php" method="POST"> Please choose a file: <input name="uploaded" type="file" /><br /> <input type="submit" value="Upload" /> </form> <?php $target = "upload/"; $target = $target . basename( $_FILES['uploaded']['name']) ; $ok=1; //This is our size condition if ($uploaded_size > 200) { echo "Your file is too large.<br>"; $ok=0; } //This is our limit file type condition if ($uploaded_type =="text/php") { echo "No PHP files<br>"; $ok=0; } //Here we check that $ok was not set to 0 by an error if ($ok==0) { Echo "Sorry your file was not uploaded"; } //If everything is ok we try to upload it else { if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) { echo "Your file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded."; } else { echo "Sorry, there was a problem uploading your file."; } } ?> So, I'm learning how to upload pictures into a system from my awesome PHP book. I've looked and looked through the script but I can't figure out whats wrong with it. Goal: The script is meant to save a full version of the image in the images folder and a thumbnail in the thumbnail folder. Bug: The full image does not appear in any folder, and the thumbnail is created but its put in the images folder. I've checked the GD library, and everything is supported. image_effect.php <?php //change this path to match your images directory $dir ='C:/x/xampp/htdocs/images'; //change this path to match your fonts directory and the desired font putenv('GDFONTPATH=' . 'C:/Windows/Fonts'); $font = 'arial'; // make sure the requested image is valid if (isset($_GET['id']) && ctype_digit($_GET['id']) && file_exists($dir . '/' . $_GET['id'] . '.jpg')) { $image = imagecreatefromjpeg($dir . '/' . $_GET['id'] . '.jpg'); } else { die('invalid image specified'); } // apply the filter $effect = (isset($_GET['e'])) ? $_GET['e'] : -1; switch ($effect) { case IMG_FILTER_NEGATE: imagefilter($image, IMG_FILTER_NEGATE); break; case IMG_FILTER_GRAYSCALE: imagefilter($image, IMG_FILTER_GRAYSCALE); break; case IMG_FILTER_EMBOSS: imagefilter($image, IMG_FILTER_EMBOSS); break; case IMG_FILTER_GAUSSIAN_BLUR: imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR); break; } // add the caption if requested if (isset($_GET['capt'])) { imagettftext($image, 12, 0, 20, 20, 0, $font, $_GET['capt']); } //add the logo watermark if requested if (isset($_GET['logo'])) { // determine x and y position to center watermark list($width, $height) = getimagesize($dir . '/' . $_GET['id'] . '.jpg'); list($wmk_width, $wmk_height) = getimagesize('images/logo.png'); $x = ($width - $wmk_width) / 2; $y = ($height - $wmk_height) / 2; $wmk = imagecreatefrompng('images/logo.png'); imagecopymerge($image, $wmk, $x, $y, 0, 0, $wmk_width, $wmk_height, 20); imagedestroy($wmk); } // show the image header('Content-Type: image/jpeg'); imagejpeg($image, '', 100); ?> check_image.php <?php include 'db.inc.php'; //connect to MySQL $db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die ('Unable to connect. Check your connection parameters.'); mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db)); //change this path to match your images directory $dir ='C:/x/xampp/htdocs/images'; //change this path to match your thumbnail directory $thumbdir = $dir . '/thumbs'; //change this path to match your fonts directory and the desired font putenv('GDFONTPATH=' . 'C:/Windows/Fonts'); $font = 'arial'; // handle the uploaded image if ($_POST['submit'] == 'Upload') { //make sure the uploaded file transfer was successful if ($_FILES['uploadfile']['error'] != UPLOAD_ERR_OK) { switch ($_FILES['uploadfile']['error']) { case UPLOAD_ERR_INI_SIZE: die('The uploaded file exceeds the upload_max_filesize directive ' . 'in php.ini.'); break; case UPLOAD_ERR_FORM_SIZE: die('The uploaded file exceeds the MAX_FILE_SIZE directive that ' . 'was specified in the HTML form.'); break; case UPLOAD_ERR_PARTIAL: die('The uploaded file was only partially uploaded.'); break; case UPLOAD_ERR_NO_FILE: die('No file was uploaded.'); break; case UPLOAD_ERR_NO_TMP_DIR: die('The server is missing a temporary folder.'); break; case UPLOAD_ERR_CANT_WRITE: die('The server failed to write the uploaded file to disk.'); break; case UPLOAD_ERR_EXTENSION: die('File upload stopped by extension.'); break; } } //get info about the image being uploaded $image_caption = $_POST['caption']; $image_username = $_POST['username']; $image_date = @date('Y-m-d'); list($width, $height, $type, $attr) = getimagesize($_FILES['uploadfile']['tmp_name']); // make sure the uploaded file is really a supported image $error = 'The file you uploaded was not a supported filetype.'; switch ($type) { case IMAGETYPE_GIF: $image = imagecreatefromgif($_FILES['uploadfile']['tmp_name']) or die($error); break; case IMAGETYPE_JPEG: $image = imagecreatefromjpeg($_FILES['uploadfile']['tmp_name']) or die($error); break; case IMAGETYPE_PNG: $image = imagecreatefrompng($_FILES['uploadfile']['tmp_name']) or die($error); break; default: die($error); } //insert information into image table $query = 'INSERT INTO images (image_caption, image_username, image_date) VALUES ("' . $image_caption . '", "' . $image_username . '", "' . $image_date . '")'; $result = mysql_query($query, $db) or die (mysql_error($db)); //retrieve the image_id that MySQL generated automatically when we inserted //the new record $last_id = mysql_insert_id(); // save the image to its final destination $image_id = $last_id; imagejpeg($image, $dir . '/' . $image_id . '.jpg'); imagedestroy($image); } else { // retrieve image information $query = 'SELECT image_id, image_caption, image_username, image_date FROM images WHERE image_id = ' . $_POST['id']; $result = mysql_query($query, $db) or die (mysql_error($db)); extract(mysql_fetch_assoc($result)); list($width, $height, $type, $attr) = getimagesize($dir . '/' . $image_id . '.jpg'); } if ($_POST['submit'] == 'Save') { // make sure the requested image is valid if (isset($_POST['id']) && ctype_digit($_POST['id']) && file_exists($dir . '/' . $_POST['id'] . '.jpg')) { $image = imagecreatefromjpeg($dir . '/' . $_POST['id'] . '.jpg'); } else { die('invalid image specified'); } // apply the filter $effect = (isset($_POST['effect'])) ? $_POST['effect'] : -1; switch ($effect) { case IMG_FILTER_NEGATE: imagefilter($image, IMG_FILTER_NEGATE); break; case IMG_FILTER_GRAYSCALE: imagefilter($image, IMG_FILTER_GRAYSCALE); break; case IMG_FILTER_EMBOSS: imagefilter($image, IMG_FILTER_EMBOSS); break; case IMG_FILTER_GAUSSIAN_BLUR: imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR); break; } // add the caption if requested if (isset($_POST['emb_caption'])) { imagettftext($image, 12, 0, 20, 20, 0, $font, $image_caption); } //add the logo watermark if requested if (isset($_POST['emb_logo'])) { // determine x and y position to center watermark list($wmk_width, $wmk_height) = getimagesize('images/logo.png'); $x = ($width - $wmk_width) / 2; $y = ($height - $wmk_height) / 2; $wmk = imagecreatefrompng('images/logo.png'); imagecopymerge($image, $wmk, $x, $y, 0, 0, $wmk_width, $wmk_height, 20); imagedestroy($wmk); } // save the image with the filter applied imagejpeg($image, $dir . '/' . $_POST['id'] . '.jpg', 100); //set the dimensions for the thumbnail $thumb_width = $width * 0.10; $thumb_height = $height * 0.10; //create the thumbnail $thumb = imagecreatetruecolor($thumb_width, $thumb_height); imagecopyresampled($thumb, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $width, $height); imagejpeg($thumb, $dir . '/' . $_POST['id'] . '.jpg', 100); imagedestroy($thumb); ?> <html> <head> <title>Here is your pic!</title> </head> <body> <h1>Your image has been saved!</h1> <img src="images/<?php echo $_POST['id']; ?>.jpg" /> </body> </html> <?php } else { ?> <html> <head> <title>Here is your pic!</title> </head> <body> <h1>So how does it feel to be famous?</h1> <p>Here is the picture you just uploaded to our servers:</p> <?php if ($_POST['submit'] == 'Upload') { $imagename = 'images/' . $image_id . '.jpg'; } else { $imagename = 'image_effect.php?id=' . $image_id . '&e=' . $_POST['effect']; if (isset($_POST['emb_caption'])) { $imagename .= '&capt=' . urlencode($image_caption); } if (isset($_POST['emb_logo'])) { $imagename .= '&logo=1'; } } ?> <img src="<?php echo $imagename; ?>" style="float:left;"> <table> <tr><td>Image Saved as: </td><td><?php echo $image_id . '.jpg'; ?></td></tr> <tr><td>Height: </td><td><?php echo $height; ?></td></tr> <tr><td>Width: </td><td><?php echo $width; ?></td></tr> <tr><td>Upload Date: </td><td><?php echo $image_date; ?></td></tr> </table> <p>You may apply special options to your image below. Note: saving an image with any of the options applied <em>cannot be undone</em>.</p> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div> <input type="hidden" name="id" value="<?php echo $image_id;?>"/> Filter: <select name="effect"> <option value="-1">None</option> <?php echo '<option value="' . IMG_FILTER_GRAYSCALE . '"'; if (isset($_POST['effect']) && $_POST['effect'] == IMG_FILTER_GRAYSCALE) { echo ' selected="selected"'; } echo '>Black and White</option>'; echo '<option value="' . IMG_FILTER_GAUSSIAN_BLUR . '"'; if (isset($_POST['effect']) && $_POST['effect'] == IMG_FILTER_GAUSSIAN_BLUR) { echo ' selected="selected"'; } echo '>Blur</option>'; echo '<option value="' . IMG_FILTER_EMBOSS . '"'; if (isset($_POST['effect']) && $_POST['effect'] == IMG_FILTER_EMBOSS) { echo ' selected="selected"'; } echo '>Emboss</option>'; echo '<option value="' . IMG_FILTER_NEGATE . '"'; if (isset($_POST['effect']) && $_POST['effect'] == IMG_FILTER_NEGATE) { echo ' selected="selected"'; } echo '>Negative</option>'; ?> </select> <br/><br/> <?php echo '<input type="checkbox" name="emb_caption"'; if (isset($_POST['emb_caption'])) { echo ' checked="checked"'; } echo '>Embed caption in image?'; echo '<br/><br/><input type="checkbox" name="emb_logo"'; if (isset($_POST['emb_logo'])) { echo ' checked="checked"'; } echo '>Embed watermarked logo in image?'; ?> <br/><br/> <input type="submit" value="Preview" name="submit" /> <input type="submit" value="Save" name="submit" /> </div> </form> </body> </html> <?php } ?> Any help appreciated. <td><label for='images'> <b>File to upload:</b> </label></td> <td><input type='file' name = 'drama_image' '<?php echo $row['drama_image']; ?>'/></ </tr> <?php $target_path = "images/"; $target_path = $target_path . basename( $_FILES['images']['name']); if(move_uploaded_file($_FILES['images']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['images']['name']). " has been uploaded"; } else{ echo $row['drama_image']; } ?> ['drama_image'] is the name of the file I wanna echo it out in the box of file upload so when I save , the default picture will still be there instead of being overwritten as the box does not have any value in it. Hello, all: been trying to convert this little single-file upload to multiple by naming each file form-field as "userfile[]" as it's supposed to automatically treat them as an array.. but no luck! Can you guide me as to what am I doing wrong?? appreciate the help! Code: [Select] <?php if (!isset($_REQUEST["seenform"])) { ?> <form enctype="multipart/form-data" action="#" method="post"> Upload file: <input name="userfile[]" type="file" id="userfile[]"> Upload file: <input name="userfile[]" type="file" id="userfile[]"> <input type="submit" value="Upload"> <input type="hidden" name="seenform"> </form> <?php } else { // upload begins $userfiles = array($_FILES['userfile']); foreach ($userfiles as $userfile) { // foreach begins $uploaded_dir = "uploads/"; $userfile = $_FILES['userfile']["name"]; $path = $uploaded_dir . $userfile; if (move_uploaded_file($_FILES['userfile']["tmp_name"], $path)) { print "$userfile file moved"; // do something with the file here } else { print "Move failed"; } } // foreach ends } // upload ends ?> I havent included the whole title as it wouldnt let me but I was wondering if someone could help me on this? I know this is possible as torrentflux caters for this but unsure of where to start. I dont want to allow file or directory uploads or creation in my /etc/php.ini file (this is turned off). Yet then torrentflux allows me to link a torrent from an external source (using legal downloads of course ) but then it uploads it on my server and creates folders on a per user basis. How is this possible can someone give me some pointers please? I look forward to any replies, Jeremy. Hello! I have this validation script that seems to work great until I add the size validation. I'm ready to pull my hair out! Can someone tell me what I'm doing wrong? Code: [Select] if (isset($_POST['Submit'])) { $user_id = $userdata[user_id]; $number_of_file_fields = 0; $number_of_uploaded_files = 0; $number_of_moved_files = 0; $uploaded_files = array(); $max_filesize = 5242880; // Maximum filesize in BYTES (currently 5MB). $upload_directory = dirname(__file__) . '/'.$user_id.'/'; //set upload directory if (!is_dir($upload_directory)) { mkdir($upload_directory, 0777, true); } for ($i = 0; $i < count($_FILES['images']['name']); $i++) { $number_of_file_fields++; if ($_FILES['images']['name'][$i] != '') { //check if file field empty or not $number_of_uploaded_files++; if($_FILES['images']['size'] > $max_filesize){ echo "<b class='red'>Max file size is 5MB.</b><br/>"; $sz = true; } $ext = validate_extension($_FILES['images']['name'][$i]); if (($ext == true) && ($sz == true)){ $uploaded_files[] = $_FILES['images']['name'][$i]; if (move_uploaded_file($_FILES['images']['tmp_name'][$i], $upload_directory . $_FILES['images']['name'][$i])) { $number_of_moved_files++; } }else { echo "<b class='red'>File extention error. Only .doc, .pdf, .jpg and .gif files are allowed. </b><br/>"; } } } if ($number_of_uploaded_files >= 1){ echo "Number of files submitted:<b class='red>".$number_of_uploaded_files."</b><br/>"; echo "Number of successfully uploaded files:<b class='red>".$number_of_moved_files."</b><br/><br/>"; echo "Uploaded File Name(s):<br/>" . implode('<br/>', $uploaded_files); } } As of now it results in every uploaded file returning the error "Max file size is 5MB." HI All, I have a form submission that uploads a photo as well as submitting other data. I would like to change the name of the photo to the id of the person record (created automatically on by the database) then a hyphen, then their first name and lastname. (i am flexible on this). This file name will also need to be submitted into the person record so the photo and the person can be linked. I am struggling with this one - but here is the code i have so far.
<?php include 'includes/dbconn.php'; $target_dir = "img/people/"; $target_file = $target_dir . basename($_FILES["personHeadshot"]["name"]); $uploadOk = 1; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION)); if ($_SERVER['REQUEST_METHOD']=='POST'){ $fn = $_POST['fname']; $ln = $_POST['lname']; $ad1 = $_POST['ad1']; $ad2 = $_POST['ad2']; $city = $_POST['city']; $post = $_POST['postcode']; $tel = $_POST['phone']; $email = $_POST['email']; $crole = $_POST['comRole']; $OFA = $_POST['OFA']; $playerType = $_POST['playerType']; $team = $_POST['primaryTeam']; $stmt = $conn->prepare(" INSERT IGNORE INTO person (fname, lname, committee_role_id, player_type_id, team_id, ad1, ad2, city, postcode, mobile, email, on_field_auth_id) VALUES (?,?,?,?,?,?,?,?,?,?,?,?) "); $stmt -> bind_param(ssiiissssssi, $fn, $ln, $crole, $playerType, $team, $ad1, $ad2, $city, $post, $tel, $email, $OFA); $stmt -> execute(); // Check if image file is a actual image or fake image //photo upload $check = getimagesize($_FILES["personHeadshot"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } //photo upload header("location: ../admin-people-list.php"); } // Check if file already exists if (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0; } // Check file size if ($_FILES["personHeadshot"]["size"] > 500000) { echo "Sorry, your file is too large."; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["personHeadshot"]["tmp_name"], $target_file)) { echo "The file ". basename( $_FILES["personHeadshot"]["name"]). " has been uploaded."; } else { echo "Sorry, there was an error uploading your file."; } }
Been looking on the web on and off for the past few days but can't seem to find a list of all file types that PHP (or is it Apache) appreciates. Like when you go and upload file using a form and then it outputs: Quote Array ( [upload_file] => Array ( [name] => discount_xcart_orders.csv [type] => text/comma-separated-values [tmp_name] => /tmp/phprAk2R6 [error] => 0 [size] => 674 ) ) Is there an entire list of file types that this '[type] => text/comma-separated-values' falls under? Just out of interest of course, Jeremy. Hey all So have been working on a file upload script, it was uploading the file but also adding the path name instead of NULL to mysql when no image was to upload, that is now fixed however now it won't upload the actual image to the directory. I tried undoing the mysql changes but it still won't upload the image to the directory. Am testing on my own computer using xampp so no file permission issues, plus it was working before. Any help much appreciated. Thanks <?php $product_code = mysqli_real_escape_string($conn, $_POST['product_code']); $product_name = mysqli_real_escape_string($conn, $_POST['product_name']); $category = mysqli_real_escape_string($conn, $_POST['category']); $filter = mysqli_real_escape_string($conn, $_POST['filter']); $description = mysqli_real_escape_string($conn, $_POST['description']); $specification = mysqli_real_escape_string($conn, $_POST['specification']); $price = mysqli_real_escape_string($conn, $_POST['price']); $target_dir = "../images/products/"; if (!isset ($_FILES["img1"]["name"])) { $target_file1 = NULL; } else { if (!empty($_FILES["img1"]["name"])) { $target_file1 = $target_dir . basename($_FILES["img1"]["name"]); } else { $target_file1 = NULL; } } if (!isset ($_FILES["img2"]["name"])) { $target_file2 = NULL; } else { if (!empty($_FILES["img2"]["name"])) { $target_file2 = $target_dir . basename($_FILES["img2"]["name"]); } else { $target_file2 = NULL; } } if (!isset ($_FILES["img3"]["name"])) { $target_file3 = NULL; } else { if (!empty($_FILES["img3"]["name"])) { $target_file3 = $target_dir . basename($_FILES["img3"]["name"]); } else { $target_file3 = NULL; } } if (!isset ($_FILES["img4"]["name"])) { $target_file4 = NULL; } else { if (!empty($_FILES["img4"]["name"])) { $target_file4 = $target_dir . basename($_FILES["img4"]["name"]); } else { $target_file4 = NULL; } } $uploadOk = 1; $imageFileType1 = strtolower(pathinfo($target_file1,PATHINFO_EXTENSION)); $imageFileType2= strtolower(pathinfo($target_file2,PATHINFO_EXTENSION)); $imageFileType3 = strtolower(pathinfo($target_file3,PATHINFO_EXTENSION)); $imageFileType4 = strtolower(pathinfo($target_file4,PATHINFO_EXTENSION)); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check1 = getimagesize($_FILES["img1"]["tmp_name"]); $check2 = getimagesize($_FILES["img2"]["tmp_name"]); $check3 = getimagesize($_FILES["img3"]["tmp_name"]); $check4 = getimagesize($_FILES["img4"]["tmp_name"]); if($check1 !== false) { echo "File is an image - " . $check1["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } if (file_exists($target_file1)) { echo "Sorry, image one already exists."; $uploadOk = 0; } if($imageFileType1 != "jpg" && $imageFileType1 != "png" && $imageFileType1 != "jpeg" && $imageFileType1 != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed for img1."; $uploadOk = 0; } if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["img1"]["tmp_name"], $target_file1)) { echo "The file ". htmlspecialchars( basename( $_FILES["img1"]["name"])). " has been uploaded."; } else { echo "Sorry, there was an error uploading image one."; } } echo '<br />'; if($check2 !== false) { echo "File is an image - " . $check2["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } if (file_exists($target_file2)) { echo "Sorry, image two already exists."; $uploadOk = 0; } if($imageFileType2 != "jpg" && $imageFileType2 != "png" && $imageFileType2 != "jpeg" && $imageFileType2 != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed for img2."; $uploadOk = 0; } if (isset ($target_file2)) { if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["img2"]["tmp_name"], $target_file2)) { echo "The file ". htmlspecialchars( basename( $_FILES["img1"]["name"])). " has been uploaded."; } else { echo "Sorry, there was an error uploading image two."; } } } echo '<br />'; if($check3 !== false) { echo "File is an image - " . $check3["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } if (file_exists($target_file3)) { echo "Sorry, image three already exists."; $uploadOk = 0; } if($imageFileType3 != "jpg" && $imageFileType3 != "png" && $imageFileType3 != "jpeg" && $imageFileType3 != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed for img3."; $uploadOk = 0; } if (isset ($target_file3)) { if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["img3"]["tmp_name"], $target_file3)) { echo "The file ". htmlspecialchars( basename( $_FILES["img3"]["name"])). " has been uploaded."; } else { echo "Sorry, there was an error uploading image three."; } } } echo '<br />'; if($check4 !== false) { echo "File is an image - " . $check4["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } if (file_exists($target_file4)) { echo "Sorry, image four already exists."; $uploadOk = 0; } if($imageFileType4 != "jpg" && $imageFileType4 != "png" && $imageFileType4 != "jpeg" && $imageFileType4 != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed for img4."; $uploadOk = 0; } if (isset ($target_file4)) { if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["img4"]["tmp_name"], $target_file4)) { echo "The file ". htmlspecialchars( basename( $_FILES["img4"]["name"])). " has been uploaded."; } else { echo "Sorry, there was an error uploading image four."; } } } } echo '<br />'; $image1 = basename($target_file1); $image2 = basename($target_file2); $image3 = basename($target_file3); $image4 = basename($target_file4); // Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // Check connection if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } $sql = "INSERT INTO products (product_code, product_name, category, filter, description, specification, img1, img2, img3, img4, price) VALUES('$product_code', '$product_name', '$category', '$filter', '$description', '$specification', '$image1', '$image2', '$image3', '$image4', '$price')"; if (mysqli_query($conn, $sql)) { echo "Product Added successfully, Now on to the Sizes"; } else { echo "Error: " . $sql . "<br>" . mysqli_error($conn); } ?>
How do I Upload Multiple Files using a PHP form and script? 10 files at one time would be great. Ultimately I need a photo upload and management script. Here is my current single file upload form: <form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file">Upload a Photo:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> Here is the Php Script: <?php if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 200000)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]); echo "Stored in: " . "uploads/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; } ?> How would i do a random file name for my upload script Code: [Select] $type = $_FILES['uploadedfile']['type']; // Where the file is going to be placed $target_path ="/***/***/public_html/****/lofslidernews/images/"; /* Add the original filename to our target path. Result is "/images/uploads/filename.extension" */ $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); $uploadedfile2 = $_FILES['uploadedfile']['name']; if (empty($quicktitle) || empty($maintitle ) || empty($description ) || empty($uploadedfile)) { $_SESSION["promoerror"] = "Please Select an image and enter a Quick Title, Main Title and Description!" ; header("Location: promo.php"); //This sets the redirection information //echo "Going to login.php, username or password is empty"; exit(); //Ends the script and redirects to above } $query = "INSERT INTO promotion (title, maintitle, description, image) VALUES ('$quicktitle','$maintitle','$description', '$uploadedfile2')"; $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); if ( ( $type != "image/jpeg") && ($type != "image/gif") ) { die ("That format is not allowed"); } else { move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path); header("Location: promo.php"); $_SESSION["promoerror"] = "Added Successfully!"; } Here is my PHP, i want to share voice_id and voice_name to another php file using ajax,
<?php //fetch_data.php include('database_connection.php'); if(isset($_POST["action"])) { $query = " SELECT * FROM voice_bank_data WHERE voice_status = '1' "; // if(isset($_POST["minimum_price"], $_POST["maximum_price"]) && !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"])) // { // $query .= " // AND product_price BETWEEN '".$_POST["minimum_price"]."' AND '".$_POST["maximum_price"]."' // "; // } // Gender if(isset($_POST["gender"])) { $gender_filter = implode("','", $_POST["gender"]); $query .= " AND voice_gender IN('".$gender_filter."') "; } // Genres if(isset($_POST["genres"])) { $genres_filter = implode("','", $_POST["genres"]); $query .= " AND voice_genres IN('".$genres_filter."') "; } // Voice Modulation if(isset($_POST["voice_modulation"])) { $voice_modulation_filter = implode("','", $_POST["voice_modulation"]); $query .= " AND voice_voice_modulation IN('".$voice_modulation_filter."') "; } // Languages if(isset($_POST["languages"])) { $languages_filter = implode("','", $_POST["languages"]); $query .= " AND voice_languages IN('".$languages_filter."') "; } // Jingle Moods if(isset($_POST["jingle_moods"])) { $jingle_moods_filter = implode("','", $_POST["jingle_moods"]); $query .= " AND voice_jingle_moods IN('".$jingle_moods_filter."') "; } // IVR if(isset($_POST["ivr"])) { $ivr_filter = implode("','", $_POST["ivr"]); $query .= " AND voice_ivr IN('".$ivr_filter."') "; } $statement = $connect->prepare($query); $statement->execute(); $result = $statement->fetchAll(); $total_row = $statement->rowCount(); $output = ''; if($total_row > 0) { foreach($result as $row) { $output .= ' <div class="col-sm-3 col-lg-4 col-md-3"> <div style="border:1px solid #ccc; border-radius:5px; padding:10px; margin-bottom:16px; height:300px;"> <audio controls controlsList="nodownload" style="padding: 10px 10px 10px 10px;margin-left: -21px;"> <source src="audio_sample/'. $row['voice_audio_file'] .'" alt="" class="img-responsive"> </audio> <p align="center"><strong> '. $row['voice_name'] .'</strong></p> <p style="font-size: 12px;"> Id : '. $row['voice_id'].' <br /> Name : '. $row['voice_name'].' <br /> Gender : '. $row['voice_gender'].' <br /> Genres : '. $row['voice_genres'].' <br /> Voice Modulation : '. $row['voice_voice_modulation'].' <br /> Languages : '. $row['voice_languages'].' <br /> Jingle Moods : '. $row['voice_jingle_moods'].' <br /> Ivr : '. $row['voice_ivr'].' <br /> </p> <button type="button" class="btn btn-primary" type="submit" style="padding: 5px 83px 5px 83px;">Add to PlayList </button> </div> </div> '; } } else { $output = '<h3>No Data Found</h3>'; } echo $output; } ?> <script> $('.button').on('click',function() { var voice_id = $("#voice_id").val(); var voice_name = $("#voice_name").val(); $.ajax({ type : "POST", url : "my_cart.php", datatype : "text", data : {voice_id: voice_id, voice_name: voice_name }, success: function(data) { console.log(data); // console.log('success',data); } }); }); </script> Not shared the details, Edited July 2, 2019 by aveevaI need help modifying this so that the picture that I upload will be submitted to the database and be uploaded. I have been trying to make it work for over an hour now. please help if you can. thanks. Code: [Select] <?php if($_post['submit']){ include_once "connect_to_mysql_1.php"; $name=$_POST['name']; $uploaddir = '/images/'; $picture = '$name.jpg'; $target_path = "/images/"; $file = $uploaddir . basename($_FILES['product1']['name']); move_uploaded_file($_FILES["product1"]["tmp_name"], "images/" . $_FILES["product1"]["name"]); echo "Stored in: " . "images/" . $_FILES["product1"]["name"]; if (move_uploaded_file($_FILES['product1']['tmp_name'], $file)) { echo "success"; $sql = "INSERT INTO products(link, name) VALUES('$file', '$name')"; $rs = mysql_query($sql) or die ("Problem with the query: $sql<br>" . mysql_error()); echo mysql_error(); } else { echo "error ".$_FILES['product1']['error']." --- ".$_FILES['product1']['tmp_name']." %%% ".$file."($size)"; $picture_name = pathinfo($picture, PATHINFO_FILENAME); }} ?> <!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" /> <meta name="description" content="Thank you for your interest in Old Mil-custom Woodworking. We have hired Aaron's Web Design to build a brand new website for us! Thank you for your patience!"> <meta name="keywords" content="Web, Design, web design, old, mil, oldmil, old mil, wood, woodwork, work, working, woodworking, woodworker, woodworkers, custom"> <title>Our Products-Old Mil</title> <style type="text/css"> <!-- body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #42413C; margin: 0; padding: 0; color: #000; background-image: url(../images/background.png); } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ padding-right: 15px; padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick; } a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; } /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color: #42413C; text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; } /* ~~this fixed width container surrounds the other divs~~ */ .container { width: 960px; background: #FFF; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ } /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */ .header { background: #ADB96E; font-size: xx-large; font-family: "Comic Sans MS", cursive; height:137px; } /* ~~ These are the columns for the layout. ~~ 1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. 2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin. 3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document. 4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source. */ .sidebar1 { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px; height:770px } .content { padding: 10px 0; width: 780px; float: left; } /* ~~ This grouped selector gives the lists in the .content area space ~~ */ .content ul, .content ol { padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */ } /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */ ul.nav { list-style: none; /* this removes the list marker */ border-top: 4px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */ margin-bottom: 4px solid #666; /* this creates the space between the navigation on the content below */ } ul.nav li { border-bottom: 4px solid #666; /* this creates the button separation */ } ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ padding: 5px 5px 5px 15px; display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */ text-decoration: none; background-image: url(/images/slat.png); } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background-image: url(/images/slat1.png); color: #000; } /* ~~ The footer ~~ */ .footer { padding: 10px 0; background: #CCC49F; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */ clear:both; height:0; font-size: 1px; line-height: 0px; } .container .sidebar1 .nav li a div { color: #000; padding: 0px; } #apDiv1 { position:relative; left:160px; top:-130px; width:772px; height:88px; z-index:1; } #ap12 { position:relative; top:-50px; left:00px; width:772px; height:88px; z-index:1; } #apDiv2 { position:relative; left:30px; top:30px; width:270px; height:270px; z-index:2; background-color: #CCCCCC; } --> </style></head> <body> <div class="container"> <div class="header"><a href="#"><img src="../images/Old Mil LOGO.jpg" alt="Insert Logo Here" name="Insert_logo" width="122" height="137" id="Insert_logo" style="background: #C6D580; display:block;" /> <div id="apDiv1"><span class="header">Old Mil<br /> Custom Woodworking, Inc. </span></div></a><!-- end .header --></div> <div class="sidebar1"> <ul class="nav"> <li><a href="/Products"> <div font color="black">Products</div></a></li> <li><a href="#"> <div font color="black">Coming Soon</div></a></li> <li><a href="#"> <div font color="black">Coming Soon</div></a></li> <li><a href="#"> <div font color="black">Coming Soon</div></a></li> </ul> <p> </p> <!-- end .sidebar1 --></div> <div class="content"> <h1> </h1> <form action="products.php" method="post" enctype="multipart/form-data" name="form1" id="form1"> <div id="apDiv2"> <p><label for="product1"></label> <label for="name">name</label> <input type="text" name="name" id="name" /> </p> <p>Picture <input type="file" name="product1" id="product1" /> </p> <p> <label for="Caption1">Caption</label> <input type="text" name="Caption1" id="Caption1" /> </p></div> <input name="submit" type="submit" value="Upload" /> </form> <h1><br /> <br /><br /><br /><br /><br /> </h1> <!-- end .content --></div> <p> </p> <p> </p> <div class="footer"> <p>Website made by <a href="http://www.aaronswebdesign.infiniteserve.com">Aaron's Web Design</a></p> <!-- end .footer --></div> <!-- end .container --></div> </body> </html> |