无目标的Ajax上传无法正常工作

Question

I'm currently writing a website, which does upload files to a server. I'm trying to submit them via Ajax. Somehow that doesn't work and I don't know how to solve this.

This is what the form looks like

The HTML

Date of the Show

  </p>
  <p>
      Which Show<br/>
    <input type="text" class="span8" id="show" /></p>
  <p>
    Name of the Presenter<br/>
    <input type="text" class="span8" id="presenter" /></p>
  <p>

    Program Description <br/>
    <input type="text" class="span8" id="description" /></p>
<p>
  Upload your file <br />
  <input type="file" id="file" name="files" />
</p>
  <p>
    <input type="submit" name="submit" value="Upload your data" />
  </p>

The JavaScript/jQuery

    $('input[type="submit"]').click(function(event){
      var _date = $('#date').val();
      var _show = $('#show').val();
      var _presenter = $('#presenter').val();
      var _desc = $('#description').val();
      var _file = $('#file').val();

      event.preventDefault();

      $.post('ajax/submit.php',{"date": _date, 
                                    "show": _show,
                                    "presenter": _presenter,
                                    "description": _desc,
                                    "files": _file},
                                    function(data){
                                      console.log(data);

      })
      return false;
    })

The PHP

<?php
if(isset($_POST)){

    // Post variables
    $date       = $_POST['date'];
    $show       = $_POST['show'];
    $presenter  = $_POST['presenter'];
    $desc       = $_POST['description'];
    $file       = $_FILES["files"]; 

    // config for file handling (where to put)
    $upload_dir = "/opt/files/mdb/";
    $upload = $upload_dir.basename($_FILES['files']);

    // only allowing the filetpyes within the array
    $allowed_filtypes  = array('audio/mpeg');

    // Check if there is any error with uploading the file
    if($_FILES["files"]["error"] > 0){
        throw new exception('Error encountered');
    }else{
        if(in_array($_FILES['files']['type'],$allowed_filtypes)){
            move_uploaded_file($file, $upload);
        }else{
            print_r($_FILES);
            print_r($_POST);

        }   
    }
}else{
    echo "Wrong form key";
    // throw new exception('Wrong form key');

}
?>

When I print out the Arrays via print_r() the POST Array is full of my data but my FILES array is empty.

I think there is somehow a problem with the jQuery but so far I couldn't find anything useful on this.

Any help appreciated

Answer 1

The problem is you cannot do file upload through ajax unless you are using FormData https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData/Using_FormData_Objects This is supported in most browsers, but not in IE 9 or less

You could use a flash based uploader like uploadify http://www.uploadify.com/