Upload images via FileAPI and PHP

Question

I'm trying to upload multiple images via FilesAPI. I have the following code here:

$(document).ready(function()
{
   function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);

    }
   uploadFile(f);
  }

 document.getElementById('files').addEventListener('change', handleFileSelect, false);

   function uploadFile(file)
   {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();

      formData.append('file',file);

      xhr.open('POST', 'upload_team.php');
      xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

        xhr.send(formData);
      $('#test').load('upload_team.php');
   }
});

How do I "transfer" the image info, to a PHP-script for upload? I've tried like this:

<?php
echo $_FILES['file'];
if(isset($_FILES['file'])) {
echo "hej<br>";
}
?>

But the code inside the echo is not executed.

Anyone who can help me?

Answer 1

http://jsfiddle.net/Tarnum/rya6X/7/ (I slightly modified function uploadFile )

Back-end on PHP

<?php
   if(isset($_FILES['file'])) {
      echo $_FILES['file']['name'];
   }
?>

http://www.php.net/manual/en/features.file-upload.post-method.php

It should work.

If not - try to send the form in the usual way without JavaScript and AJAX. For example, copy the <form> code from http://jsfiddle.net/, fix attribute "action", select the file and click on the submit button.

For the server, this will be exactly the same as the HTTP request using AJAX.

If the problem continues - then the problem is somewhere on the server side. Maybe in the server configuration disabled the ability to upload files.

Answer 2

First, the html "form" element should have this attribute

enctype= multipart/form-data

The rest of the answer is here Handle File Uploads/Php Manual