/ Published in: PHP
Uses ajax upload from http://valums.com/ajax-upload/. Complete working script with front and back end validation. Enjoy.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!-- The javascript, put in head or above last body tag on same page as the form --> <script type="text/javascript" src="../scripts/ajaxupload.js"></script> <script type="text/javascript"> $(document).ready(function() { var upload = new Ajax_upload('#userfile', { //upload script action: 'upload.php', onSubmit : function(file, extension){ //get the input values $('.error').hide() //show loading animation $("#loading").show(); var name = $("input#name").val(); var email = $("input#email").val(); var company = $("input#company").val(); var userfile = $("input#userfile").val(); var image = $("input:checked").val(); var message = $("textarea#message").val(); //validate form $(":input").css("border", "1px solid #aaa"); $("#errors").hide(); if (name == "") { $("input#name").css("border", "2px solid #900").focus(); $("#errors").show().text("Please enter your name"); return false; } else if (email == "") { $("input#email").css("border", "2px solid #900").focus(); $("#errors").show().text("Please enter an email address"); return false; } else if (company == "") { $("input#company").css("border", "2px solid #900").focus(); $("#errors").show().text("Please enter a company"); return false; } if (! (extension && /^(jpg|png|jpeg|gif|zip|xls|xlsx|csv|txt|tif|tiff|pdf|doc|eps)$/.test(extension))){ // extension is not allowed $("#loading").hide(); $("<span class='error'>Error: Not a valid file extension</span>").appendTo("#file_holder #errormes"); // cancel upload return false; } else { // get rid of error $('.error').hide(); } upload.setData({'name': name, 'image': image, 'message': message, 'email': email, 'company': company, 'file': file}); //show loading div $("#file_title").show(); }, onComplete : function(file, response){ //hide the laoding animation $("#loading").hide(); //add display:block to sucess message $(".success").css("display", "block"); //find the div in the iFrame var oBody = $(".iframe").contents().find("div"); //add the iFrame to the errormes td $(oBody).appendTo("#file_holder #errormes"); } }); }); </script> <!-- The form --> <form action="upload.php" method="post" enctype="multipart/form-data"> <table> <tr> <td class="strong" colspan="2">Please Enter your name, email address and company below.<br /> All fields are required, message is optional. All files should be under 10mb.</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td></td> <td id="errors"></td> </tr> <tr> <td>Full Name: </td> <td><input name="name" id="name" type="text" size="33" maxlength="40" /></td> </tr> <tr> <td>Email: </td> <td><input name="email" id="email" type="text" size="33" maxlength="40" /></td> </tr> <tr> <td>Company: </td> <td><input name="company" id="company" type="text" size="33" maxlength="40" /></td> </tr> <tr> <td>Message: </td> <td><textarea rows="2" cols="25" class="text" id="message" name="message" maxlength="240"></textarea></td> </tr> <tr> <td>Is this an image file?</td> <td><input name="image" type="checkbox" id="image" value="image" /> (Includes images in zip and rar files)</td> </tr> <tr> <td>Choose file(s) to upload: </td> <td><input id="userfile" class="input" type="file" name="userfile" /></td> </tr> <tr> <td colspan="2"><div id="loading">Loading, please wait.. <img src="/images/ajax-loader.gif" alt="Loading"></div></td> </tr> <tr> <td id="errormes" colspan="2"></td> </tr> <noscript> <style type="text/css"> #file_holder {display:block;} </style> <tr> <td> </td> <td><input type="submit" value="submit" class="button2" /></td> </tr> </noscript> </table> </form> <?php //The uploader, put in separate upload.php file ?> <?php $max_filesize = 10000000; // Maximum filesize in BYTES. $allowed_filetypes = array('.jpg','.jpeg','.gif','.png'); // These will be the types of file that will pass the validation. $filename = $_FILES['userfile']['name']; // Get the name of the file (including file extension). $cookie = $_COOKIE['remote_user'];//puts upload in logged in users folder by name else promts them to log in if($cookie == "") { echo "Cookie has expired, please log back in and try your upload again."; } else { $upload_path = '/nfs/www/yourdomain.com/uploads/'. $cookie .'/'; } // Now check the filesize, if it is too large then DIE and inform the user. } // Check if the filetype is allowed, if not DIE and inform the user. } // Check if we can upload to the specified path, if not DIE and inform the user. die('<div class="error">You cannot upload to the /'. $cookie .'/ folder. The permissions must be changed.</div>'); } echo '<div class="success">'. $file_strip .' uploaded successfully, view it <a href="/uploads/'. $cookie .'/'. $file_strip . '" title="Your File" target="_blank">here</a>.</div>'; // It worked. //post the form info $name = $_POST['name']; $email = $_POST['email']; $company = $_POST['company']; $image = $_POST['image']; $message = $_POST['message']; //Send the mail specifics $headers .= "MIME-Version: 1.0 "; $headers .= "Content-type: text/html; charset=iso-8859-1 "; "; if ($image == "image") { "; } $sendto = "you@yourdomain"; $subject = "$name uploaded a file to yourdomain"; $message = "Name: $name<br />Email: <a href=\"mailto:$email\">$email</a><br />Company: $company<br />File name: <a href=\"http://www.yourdomain.com/uploads/$cookie/$file_strip\">$file_strip</a><br /><br />Message: $message"; // send the email } else { echo '<div class="error">'. $file_strip .' was not uploaded. Please try again.</div>'; // It failed :(. } ?>