0

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?

Protomen
  • 9,471
  • 9
  • 57
  • 124
user500468
  • 1,183
  • 6
  • 21
  • 36

2 Answers2

0

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

Mario Legenda
  • 749
  • 1
  • 11
  • 24
  • I know how I should handle the uploading in PHP.. But how do I get the image info FROM my javascript into my php file? – user500468 Feb 09 '14 at 22:18
  • Sorry, i didn't see that its Ajax you're using. I don't know Ajax. I'm planing to learn it in a month or so, but why use Ajax for it? When you submit a form, the POST automaticly goes to the server and $_FILES gets populated. – Mario Legenda Feb 09 '14 at 22:28
0

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.

Anton Berezhnoj
  • 146
  • 3
  • Hi, This works perfectly fine. But, how do I handle more than one images? The user are able to upload more than just one Image. Should I use an array in the jQuery containing the image information, and then use this array to call upload_team.php? – user500468 Feb 11 '14 at 20:44
  • Use "multiple" attribute on http://www.w3schools.com/tags/att_input_multiple.asp . So array `var files = evt.target.files;` would be contain several user files. You can send their in one http-query or send every file in the individual http-query. Example code from jsfiddle send every files in individual http-query. P.S. My is English is not fine, but I think you can understand me. – Anton Berezhnoj Feb 15 '14 at 12:42