Advertisement
jedifunk

jQuery replace image with upload

Oct 13th, 2011
167
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 1.70 KB | None | 0 0
  1. <div class="preview"><img src="img/logo.png" class="original"></div>
  2. <div id="button1">Upload</div><span id="status"></span>
  3. <ul id="files"></ul>
  4.  
  5. <script src="js/ajaxupload.js" type="text/javascript"></script>
  6.     <script src="js/jquery.myimgscale-0.2.min.js" type="text/javascript"></script>
  7.     <script src="js/jquery.myimgscale-0.2.js" type="text/javascript"></script>
  8.     <script>
  9.     var button = $('#button1');
  10.     var status = $('#status');
  11.        
  12.         new AjaxUpload(button, {
  13.             action: 'upload-handler.php',
  14.             name: 'userfile',
  15.             onSubmit : function(file, ext){
  16.                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){  
  17.                   // check for valid file extension  
  18.                 status.text('Only JPG, PNG or GIF files are allowed');  
  19.                 return false;  
  20.                 }
  21.                 // change button text, when user selects file          
  22.                 button.text('Uploading');
  23.                                
  24.                 // If you want to allow uploading only 1 file at time,
  25.                 // you can disable upload button
  26.                 this.disable();
  27.             },
  28.             onComplete: function(file, response){
  29.                 button.text('Done');
  30.                            
  31.                 // enable upload button
  32.                 this.disable();
  33.  
  34.                 //On completion clear the status  
  35.                     status.text('');  
  36.                 //Add uploaded file to list  
  37.                     if(response==="success"){  
  38.                     $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" class="newImg" /><br />'+file).addClass('success');  
  39.                     } else{  
  40.                     $('<li></li>').appendTo('#files').text(file).addClass('error');  
  41.                     }
  42.                     $('img.original').replaceWith( $('img.newImg'));
  43.                     $('img.newImg').scaleImage({scale: 'fit'});
  44.                 }
  45.         });
  46. </script>
  47.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement