La carga de JQuery no funciona con la página usando una URL reescrita

I have found a php jquery upload script with a progress bar which actually works.

The problem is, if i use apache mod rewrite to rewrite a url from http://www.mysite.com/upload.php a http://www.mysite.com/uploads/upload.php, it doesn't work but it will work if i use an unrewritten url

Is there a reason why jquery won't run on a rewritten url?

It doesn't use the jquery form to ajax the upload instead just doing a normal upload.

This is the code for the upload.php

<!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" />
<title>Ajax Upload and Resize with jQuery and PHP</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
 <script> 
        $(document).ready(function() { 
        //elements
        var progressbox     = $('#progressbox');
        var progressbar     = $('#progressbar');
        var statustxt       = $('#statustxt');
        var submitbutton    = $("#SubmitButton");
        var myform          = $("#UploadForm");
        var output          = $("#output");
        var completed       = '0%';

                $(myform).ajaxForm({
                    beforeSend: function() { //brfore sending form
                        submitbutton.attr('disabled', ''); // disable upload button
                        statustxt.empty();
                        progressbox.slideDown(); //show progressbar
                        progressbar.width(completed); //initial value 0% of progressbar
                        statustxt.html(completed); //set status text
                        statustxt.css('color','#000'); //initial color of status text
                    },
                    uploadProgress: function(event, position, total, percentComplete) { //on progress
                        progressbar.width(percentComplete + '%') //update progressbar percent complete
                        statustxt.html(percentComplete + '%'); //update status text
                        if(percentComplete>50)
                            {
                                statustxt.css('color','#fff'); //change status text to white after 50%
                            }
                        },
                    complete: function(response) { // on complete
                        output.html(response.responseText); //update element with received data
                        myform.resetForm();  // reset form
                        submitbutton.removeAttr('disabled'); //enable submit button
                        progressbox.slideUp(); // hide progressbar
                    }
            });
        }); 

    </script> 
 <link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<table width="500" border="0">
  <tr>
    <td>File : </td>
    <td><input name="ImageFile" type="file" /></td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td><input type="submit"  id="SubmitButton" value="Upload" /></td>
  </tr>
</table>
</form>

<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>
<div id="output"></div>


</body>
</html>

EDIT:

htaccess attached (slimmed down version)

Options +FollowSymLinks
Options +Indexes
RewriteEngine on
RewriteBase /

RewriteRule ^admin$ admin/ [R,L]

# Admin rewrite rules
RewriteRule ^/?admin/$ admin/index.php [NC,L]
RewriteRule ^/?admin/news$ /admin/news.php [NC,L]
RewriteRule ^/?admin/uploads/upload$ /admin/upload.php [NC,L]

preguntado el 31 de julio de 12 a las 13:07

the problem that jquery not use ajax to send data ? -

It works fine if i don't rewrite the url but changing upload.php to uploads/upload.php makes it fail -

can you answer my question, how that "fail" looks ? form not does anything, or page rewriten ? check the javascript console to get the headers and answer from server. -

jQuery should be completely unaware of server-side stuff. It sends a request and receives a response. On the other hand this could be another fault - the rewritten URL may not be rewritten but redirected, show us you .htaccess. -

1 Respuestas

My guess would be that the culprit would be the lack of the target page (the page that the <form> action is pointing at.

It is probably looking for it in uploads/processupload.php (when using the rewrite) and in processupload.php cuando no.

You probalby forgot to rewrite for the processupload.php, but I cannot be sure until you post your .htaccess archivo.

Respondido 31 Jul 12, 14:07

If that didn't work, you should probalby check the request that is going when the file is uploading. I prefer Firebug (there is a "Network" tab, where you can see such request), but Chrome and Opera both have similar tools built in. - gregpk

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.