Advertisement
vir0e5

Preview Image Before Upload [PHP+MYSQL+MooTools+Jquery]

Feb 14th, 2014
140
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='jquery-1.9.1.js'></script>
  4. <!--<script src="ajax.js" type="text/javascript" language="javascript"></script>-->
  5. <script type='text/javascript'>
  6. jQuery.noConflict();
  7. (function($) {
  8. $(window).load(function(){
  9.     function readURL(input) {
  10.         if (input.files && input.files[0]) {
  11.             var reader = new FileReader();            
  12.             reader.onload = function (e) {
  13.                 $('#blah').attr('src', e.target.result);
  14.             }            
  15.             reader.readAsDataURL(input.files[0]);
  16.         }
  17.     }    
  18.     $(".imgInp").change(function(){
  19.         readURL(this);
  20.     });
  21. });
  22. })(jQuery);
  23. </script>
  24. <script src="mootools-1.2.6-core-nc.js" type="text/javascript" language="javascript"></script>
  25. <script type='text/javascript'>
  26. function ajaxrequest(id){
  27.     var req = new Request.HTML({
  28.         method: 'get',
  29.         url: 'display.php?id='+id,
  30.         update: $('imageframe')            
  31.     }).send();     
  32. }
  33. </script>
  34. <style>
  35. body { background-color:#eeeeee; font-family:Arial,Helvetica,sans-serif; }
  36. fieldset { width:350px; }
  37. fieldset,table,td { font-size:12px; }
  38. input { border:1px solid #999; }
  39. .error { color:red; font-size:13px; padding:0 2px; background-color:#FFFFCC; }
  40. .label { font-weight:bold; }
  41. .tablecss { background-color:#CCC; }
  42. .whiterow { background-color:#FFF; }
  43. #imageframe { padding:2px; overflow:hidden; width:auto; height:auto; margin-top:5px; }
  44. </style>
  45. </head>
  46. <body>
  47.  
  48. <fieldset>
  49. <legend>Form Upload</legend>
  50.       <form enctype='multipart/form-data' name='frmupload' action='' method='POST'>
  51.         <input type="hidden" name="MAX_FILE_SIZE" value="524288" />
  52.         <input name='filename' type='file' class="imgInp">
  53.         <img id="blah" src="#" alt="" style="max-width: 160px; max-height: 120px; border: none;"/>
  54.         <input type='submit' value='Submit' name='submit'>
  55.     </form>
  56.  
  57.  </fieldset>
  58. <?php
  59. include("dbconnect.php");
  60. if(isset($_POST['submit'])){
  61. if(is_uploaded_file($_FILES['filename']['tmp_name'])){
  62.     $maxsize=$_POST['MAX_FILE_SIZE'];      
  63.     $size=$_FILES['filename']['size'];         
  64.     // getting the image info..
  65.     $imgdetails = getimagesize($_FILES['filename']['tmp_name']);
  66.     $mime_type = $imgdetails['mime'];
  67.     //print_r($imgdetails);
  68.     // checking for valid image type
  69.     //if(($mime_type=='image/jpeg')||($mime_type=='image/gif')){
  70.     if($mime_type=='image/jpeg'){
  71.       // checking for size yet again
  72.       if($size<$maxsize){
  73.         $filename=$_FILES['filename']['name']; 
  74.         $imgData =addslashes (file_get_contents($_FILES['filename']['tmp_name']));
  75.         $sql="INSERT into image(name,image,type,size) values ('$filename','$imgData','".$mime_type."','".addslashes($imgdetails[3])."')";                  
  76.         mysql_query($sql,$link) or die(mysql_error());
  77.       }else{
  78.         echo "<font class='error'>Image to be uploaded is too large..Error uploading the image!!</font>";
  79.       }
  80.     }else{
  81.       echo "<font class='error'>Filetype Tidak Di izinkan Selain Format JPG</font>";
  82.     }
  83. }else{         
  84.   switch($_FILES['filename']['error']){
  85.     case 0: //no error; possible file attack!
  86.       echo "<font class='error'>There was a problem with your upload.</font>";
  87.       break;
  88.     case 1: //uploaded file exceeds the upload_max_filesize directive in php.ini
  89.       echo "<font class='error'>The file you are trying to upload is too big.</font>";
  90.       break;
  91.     case 2: //uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the html form
  92.       echo "<font class='error'>The file you are trying to upload is too big.</font>";
  93.       break;
  94.     case 3: //uploaded file was only partially uploaded
  95.       echo "<font class='error'>The file you are trying upload was only partially uploaded.</font>";
  96.       break;
  97.     case 4: //no file was uploaded
  98.       echo "<font class='error'>You must select an image for upload.</font>";
  99.       break;
  100.     default: //a default error, just in case!
  101.       echo "<font class='error'>There was a problem with your upload.</font>";
  102.       break;
  103.   }    
  104. }  
  105. }
  106.  
  107. $sql='SELECT * from image';
  108. $query=mysql_query($sql) or die(mysql_error);
  109. $listimage = "<fieldset>
  110.         <legend>List Images</legend>   
  111.      ";
  112. $listimage.= "
  113. <table cellpadding='1' cellspacing='1' width='300' class='tablecss'>
  114.  <tr class='tablecss'>
  115.     <td nowrap class='label'>Image Name</td>
  116.     <td class='label'>Type</td>
  117.     <td class='label'>Size</td>
  118.  </tr>";
  119. $imageexist=false;
  120. while($result=mysql_fetch_array($query)){
  121.   $imageexist=true;                
  122.   $listimage.= "
  123.  <tr class='whiterow'>
  124.     <td><a href='javascript:void(0)' onclick='ajaxrequest(\"".$result['id']."\")'>".$result['name']."</a></td>
  125.     <td>".str_replace('image/','',$result['type'])."</td>
  126.     <td nowrap>".$result['size']."</td>
  127.   </tr>";                                      
  128. }
  129. $listimage.= "
  130. </table>
  131. </fieldset>";
  132.  
  133. if($imageexist){
  134.     echo $listimage;
  135. }
  136. echo "<div id='imageframe' style='border:1px solid red;'></div>";                  
  137. ?>
Advertisement
RAW Paste Data Copied
Advertisement