title: JavaScript AJAX executes PHP instead of client redirect on uploading a file
body: <p>I've been using a classic form upload with no JavaScript for the past few weeks, but decided that I wanted to have a progress bar and get a bit control of the upload from the uploading page (index.php) with some help of JavaScript.
  So I followed this <a href="https://www.youtube.com/watch?v=EraNFJiY0Eg&amp;ab_channel=AdamKhoury" rel="nofollow noreferrer">video</a> and ended up with this code for HTML:</p>
  <pre><code>&lt;form id=&quot;upload_form&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;div class=&quot;choose_file&quot;&gt;
          &lt;span id=&quot;status&quot; style=&quot;cursor: pointer;&quot;&gt;Upload Audio File...&lt;/span&gt;
          &lt;input style=&quot;cursor: pointer;&quot; type=&quot;file&quot; name=&quot;fileToUpload&quot; id=&quot;fileToUpload&quot; accept=&quot;.mp3,.wav,.ogg&quot; onchange=&quot;uploadFile()&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;progress id=&quot;progressBar&quot; value=&quot;0&quot; max=&quot;100&quot; style=&quot;width:100%;&quot;&gt;&lt;/progress&gt;
  </code></pre>
  <p>And this code for JavaScript:</p>
  <pre><code>    function Dg (el){
      return document.getElementById(el);
  }
  function uploadFile(){
      var file = Dg(&quot;fileToUpload&quot;).files[0];
      if (file.size &gt; 1280000){
          Dg(&quot;FileOutput&quot;).innerHTML = &quot;It doesn't fit!&quot;;
      }
  
      var formdata = new FormData();
      formdata.append(&quot;fileToUpload&quot;, file);
      var ajax = new XMLHttpRequest();
      ajax.upload.addEventListener(&quot;progress&quot;, progressHandler, false);
      ajax.addEventListener(&quot;load&quot;, completeHandler, false);
      ajax.addEventListener(&quot;error&quot;, errorHandler, false);
      ajax.addEventListener(&quot;abort&quot;, abortHandler, false);
      ajax.open(&quot;POST&quot;, &quot;uploaded.php&quot;);
      ajax.send(formdata);
  }
  
  function progressHandler(e){
      var percent = (e.loaded / e.total) * 100;
      Dg(&quot;progressBar&quot;).value = Math.round(percent);
      Dg(&quot;status&quot;).innerHTML = Math.round(percent)+&quot;%&quot;;
  
  }
  
  function completeHandler(e){
      Dg(&quot;progressBar&quot;).value = 0;
      Dg(&quot;status&quot;).innerHTML = &quot;Redirecting...&quot;;
  }
  
  function errorHandler(e){
      Dg(&quot;status&quot;).innerHTML = &quot;Upload Failed...&quot;;
  
  }
  
  function abortHandler(e){
      Dg(&quot;status&quot;).innerHTML = &quot;Canceled upload&quot;;
  
  }
  </code></pre>
  <p>Everything is working, except that the server runs the PHP file instead of the client. The reason I want the user to run the PHP file is:</p>
  <ol>
  <li>It contains PHP code with &quot;if else&quot; statement which will output echo's for the client.</li>
  <li>It could be useful for things like replacing titles with for example the file name or the background audio with the file name etc..</li>
  <li>Error messages looks better in uploaded.php rather than in index.php.</li>
  </ol>
  <p>I'm not sure if it is possible to run the classic uploading code including a progress bar?</p>
  <p>Before changing the code, I used a simple code like this, but didn't have much control and it looked weird without a progress bar.</p>
  <pre><code>&lt;form action=&quot;uploaded.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;div class=&quot;choose_file&quot;&gt;
          &lt;span id=&quot;status&quot; style=&quot;cursor: pointer;&quot;&gt;Upload Lossless File...&lt;/span&gt;
          &lt;input style=&quot;cursor: pointer;&quot; type=&quot;file&quot; name=&quot;fileToUpload&quot; id=&quot;fileToUpload&quot; accept=&quot;.mp3,.wav,.ogg&quot; onchange=&quot;javascript:this.form.submit()&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>So the question is. Could I be able to change the code so that the client runs the PHP file instead of the server with including a progress bar and some javascript?
  (server will always execute PHP, but the output of the PHP doesn't reach the client.)</p>