Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 6th, 2012  |  syntax: None  |  size: 3.23 KB  |  hits: 12  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. JQuery upload doesn't work with page using a rewritten url
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Ajax Upload and Resize with jQuery and PHP</title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="js/jquery.form.js"></script>
  9.  <script>
  10.         $(document).ready(function() {
  11.         //elements
  12.         var progressbox     = $('#progressbox');
  13.         var progressbar     = $('#progressbar');
  14.         var statustxt       = $('#statustxt');
  15.         var submitbutton    = $("#SubmitButton");
  16.         var myform          = $("#UploadForm");
  17.         var output          = $("#output");
  18.         var completed       = '0%';
  19.  
  20.                 $(myform).ajaxForm({
  21.                     beforeSend: function() { //brfore sending form
  22.                         submitbutton.attr('disabled', ''); // disable upload button
  23.                         statustxt.empty();
  24.                         progressbox.slideDown(); //show progressbar
  25.                         progressbar.width(completed); //initial value 0% of progressbar
  26.                         statustxt.html(completed); //set status text
  27.                         statustxt.css('color','#000'); //initial color of status text
  28.                     },
  29.                     uploadProgress: function(event, position, total, percentComplete) { //on progress
  30.                         progressbar.width(percentComplete + '%') //update progressbar percent complete
  31.                         statustxt.html(percentComplete + '%'); //update status text
  32.                         if(percentComplete>50)
  33.                             {
  34.                                 statustxt.css('color','#fff'); //change status text to white after 50%
  35.                             }
  36.                         },
  37.                     complete: function(response) { // on complete
  38.                         output.html(response.responseText); //update element with received data
  39.                         myform.resetForm();  // reset form
  40.                         submitbutton.removeAttr('disabled'); //enable submit button
  41.                         progressbox.slideUp(); // hide progressbar
  42.                     }
  43.             });
  44.         });
  45.  
  46.     </script>
  47.  <link href="style/style.css" rel="stylesheet" type="text/css" />
  48. </head>
  49. <body>
  50.  
  51. <form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
  52. <table width="500" border="0">
  53.   <tr>
  54.     <td>File : </td>
  55.     <td><input name="ImageFile" type="file" /></td>
  56.   </tr>
  57.  
  58.   <tr>
  59.     <td>&nbsp;</td>
  60.     <td><input type="submit"  id="SubmitButton" value="Upload" /></td>
  61.   </tr>
  62. </table>
  63. </form>
  64.  
  65. <div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>
  66. <div id="output"></div>
  67.  
  68.  
  69. </body>
  70. </html>
  71.        
  72. Options +FollowSymLinks
  73. Options +Indexes
  74. RewriteEngine on
  75. RewriteBase /
  76.  
  77. RewriteRule ^admin$ admin/ [R,L]
  78.  
  79. # Admin rewrite rules
  80. RewriteRule ^/?admin/$ admin/index.php [NC,L]
  81. RewriteRule ^/?admin/news$ /admin/news.php [NC,L]
  82. RewriteRule ^/?admin/uploads/upload$ /admin/upload.php [NC,L]