Загружать изображения через FileAPI и PHP

Я пытаюсь загрузить несколько изображений через FilesAPI. У меня есть следующий код здесь:

$(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');
   }
});

Как мне «перенести» информацию об изображении в PHP-скрипт для загрузки? Я пробовал так:

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

Но код внутри эха не выполняется.

Любой, кто может мне помочь?


person user500468    schedule 09.02.2014    source источник
comment
Убедитесь, что у вас есть атрибут enctype="multipart/form-data" в элементе тега <form />.   -  person Rahil Wazir    schedule 10.02.2014


Ответы (2)


http://jsfiddle.net/Tarnum/rya6X/7/ (я немного модифицировал функцию uploadFile )

Бэкенд на PHP

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

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

Он должен работать.

Если нет - попробуйте отправить форму обычным способом без JavaScript и AJAX. Например, скопируйте код ‹form› с http://jsfiddle.net/, исправьте атрибут "action", выберите файл и нажмите кнопку отправки.

Для сервера это будет точно так же, как HTTP-запрос с использованием AJAX.

Если проблема сохранится - значит проблема где-то на стороне сервера. Может в настройках сервера отключена возможность закачки файлов.

person Anton Berezhnoj    schedule 09.02.2014
comment
Привет, это работает отлично. Но как мне обрабатывать более одного изображения? Пользователь может загрузить более одного изображения. Должен ли я использовать массив в jQuery, содержащий информацию об изображении, а затем использовать этот массив для вызова upload_team.php? - person user500468; 12.02.2014
comment
Используйте множественный атрибут для ‹input› w3schools.com/tags/att_input_multiple.asp . Таким образом, массив var files = evt.target.files; будет содержать несколько пользовательских файлов. Вы можете отправить их одним http-запросом или отправить каждый файл в отдельном http-запросе. Пример кода из jsfiddle отправляет каждый файл в отдельный http-запрос. P.S. Мой английский не в порядке, но я думаю, вы меня понимаете. - person Anton Berezhnoj; 15.02.2014

Во-первых, элемент html "form" должен иметь этот атрибут

enctype= multipart/form-data

Остальная часть ответа находится здесь Handle File Uploads/Php Manual

person Mario Legenda    schedule 09.02.2014
comment
Я знаю, как мне обрабатывать загрузку в PHP. Но как мне получить информацию об изображении ИЗ моего javascript в мой php-файл? - person user500468; 10.02.2014
comment
Извините, я не видел, что вы используете Ajax. Я не знаю Аякса. Я планирую изучить его примерно через месяц, но зачем использовать для этого Ajax? Когда вы отправляете форму, POST автоматически отправляется на сервер, и $_FILES заполняется. - person Mario Legenda; 10.02.2014