Передача картинки javascript
 

Передача картинки javascriptЗадача из html страницы необходимо передать картинку в php файл и обратно получить текстовые данные. У меня есть форма, в которой присутствует тег <input type="file">, в который я вставляю картинку. Необходимо без перезагрузки страницы, передать картинку в php файл и получить в виде глобальной переменной $_FILE. Далее обработать и передать обратно имя картинки и т.д. Вся проблема, что у меня не получается передать сам файл в php. Пробую путём создания XMLHttpRequest и отсылаю методом POST. Если кто сталкивался помогите примером.
Заранее спасибо.

Данным способом уже пробовал.
форма

<input type="file" id="uploadfile" name="uploadfile" onchange="insertim_img();" />

скрипт

<script>  
   var client = new XMLHttpRequest();
  
   function insertim_img()
   {
      var file = document.getElementById("uploadfile");
     
      /* Create a FormData instance */
      var formData = new FormData();
      /* Add the file */ 
      formData.append("upload", file.files[0]);

      client.open("post", "/adds/insert_img.php", true);
      client.setRequestHeader("Content-Type", "multipart/form-data");
      client.send(formData);  /* Send to server */ 
   }
     
   /* Check the response status */  
   client.onreadystatechange = function() 
   {
      if (client.readyState == 4 && client.status == 200) 
      {
         alert(client.statusText);
      }
   }
</script>

php файл

<?php
$image=$_FILES['upload']['name']; 	
	if ($image) 
 	{
 		$filename = stripslashes($_FILES['upload']['name']);
  		$extension = pathinfo($filename, PATHINFO_EXTENSION);
 		$extension = strtolower($extension);
 if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
 		{
 			echo 'Неверный формат файла...';
 		}
 		else
 		{
 $size=filesize($_FILES['upload']['tmp_name']);

if ($size > 3145728)
{
	echo 'Размер файла больше <b>3</b>Mb <br/>';
}

$image_name=trans($title).'.'.$extension;

$newname=$_SERVER['DOCUMENT_ROOT']."/img/".$image_name;
$copied = copy($_FILES['upload']['tmp_name'], $newname);
}}
?>

Не работает, в хроме можно ошибки посмотреть. Вот скриншот

Попробуйте в другом браузере. И первым делом следует проверить канал как таковой, прежде чем файло закачивать. Что приходит на сервер, что получает браузер и все такое.

Кстати, не замечено в вашем процессинге сообщений об успехе мероприятия. Только насчет обломов есть эхо.

Код должен быть универсальным, то есть работать в любом браузере, потому что смысла в нем не будет. Может есть возможность по другому решить данную задачу? Это банальная функция отправки картинки без перезагрузки браузера. Как на авито - добавляешь объявление, выбираешь картинку, она загружается на сервер и выводится миниатюра! У меня проблема в передаче на пхп файл.

Кое как смог передать через данную функцию файл на пхп обработку. Только теперь не могу принять в пхп. Запускаю функцию print_r($GLOBALS); и выводит что то подобное

[SERVER_SOFTWARE] => Apache/2.2.25-3-beget (Unix) [SERVER_NAME] => ***.com [SERVER_ADDR] => *** [SERVER_PORT] => 80 [REMOTE_ADDR] => *** [DOCUMENT_ROOT] => ***/public_html [SERVER_ADMIN] => webmaster@***.com [SCRIPT_FILENAME] => ***/public_html/insert_img.php [REMOTE_PORT] => 54693 [GATEWAY_INTERFACE] => CGI/1.1 [SERVER_PROTOCOL] => HTTP/1.0 [REQUEST_METHOD] => POST [QUERY_STRING] => [REQUEST_URI] => /insert_img.php [SCRIPT_NAME] => /insert_img.php [PHP_SELF] => /insert_img.php [REQUEST_TIME] => 1391371961 [argv] => Array ( ) [argc] => 0 ) [_FILES] => Array ( ) [HTTP_POST_FILES] => Array ( ) [_REQUEST] => Array ( [PHPSESSID] => 415f92b9d70fa1e213f9114df8133203 ) )

Получается передаю методом пост, а это переменная пуста. $_FILES тоже пуста. Смог кое как посмотреть что файл передается функцией

$data=file_get_contents('php://input');
//  print_r($data);

там выводится имя файла, метод передачи формы multipart/form-data; и огромное количество иероглифов(я предполагаю сама картинка), что мне дальше делать?

Делайте вот что: читайте что вам пишут веря в то, что пишут не от балды как вы привыкли не читать что пишут.

Я вам предложил проверить канал, это значит в файле /adds/insert_img.php надо сделать вот что

<?php
die("I have heard");
// тут остальная тряхомудия файла

Это значит что скрипт мгновенно сдохнет как только запустится, но выдаст в буфер фразу I have heard (Я услышал) которую вам надо вывести в консоль через ту самую функцию которая висит на событии ответа сервера

client.onreadystatechange = function() {
console.log(client.responseText)
}

Кнопки-файлы - все остается, и файлы могут на сервер уходить, но вы их не трогаете и не ищите не обрабатываете (они сами удалятся после die() из темпа), а просто смотрите в браузере, в консоли что ответил сервер.

Таким образом после нажатия Отправить или что у вас там, в консоли должен появиться текст: I have heard.

Появился? Теперь проверяете отправку файлов. Которая делается вот так

<?php
print_r($_FILES);
die(); // "I have heard" - удалите

В консоли браузера должен появится текст показывающий значение переменной $_FILES, а оно - если переменная не пустая - массив, который print_r() покажет красиво, с переносами (поэтому в браузер особого смысла выводить нет - красиво не будет).

Увидев что в $_FILES вы поймете что делать дальше. Структра $_FILES - табличная. То есть на каждый файл несколько полей. Начинают как правило с поля error, по значению которого можно судить об успешности загрузки файла. Если там 0 - загрузился и значит можно обрабатывать. Значения кодов ошибок

8 и 9 - это мои собственные коды.

Кстати вот страница с тем самым примером откуда вы сырец сперли: http://download.tizen.org/misc/examp...el_2/xhr1.html

Процессинга там нет, выдает 404, но отправка работает, можете сравнить заголовки с тем что выдает ваш скрипт и оригинальный.

И насчет других браузеров. Чтобы во всех браузерах поведение вашей апликухи было одинаковым придется изучать поведение всех браузеров и внедрять в апликуху таблетки от девиаций.

Например ФФ выдает значение кнопки файл как файл, а Хром выдает с какой-то байдой, которую еще отрезать надо.

Я написал что $_FILES пуст. я пробовал print_r($_FILES); и print_r($_POST); тут тоже пусто. Выводит Array(а тут ничего, пустота).

Куда выводит?

У вас не было вывода текста в браузер в той функции вообще. Где вы смотрите свой пустой $_FILES?

Ну то есть как вы вообще увидели что-то, если любой ответ сервера пойдет в ява-скрипт, а там у вас никакого вывода кроме статуса.

Кому интересно код такой

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

var xhr = getXmlHttp()
   function insertim_img()
   {  
var file = document.getElementById("myFile").files[0]
var formData = new FormData();
formData.append("thefile", file);
xhr.open("post", "/insert_img.php", true);
xhr.send(formData);
}

на сервере принимаю $image=$_FILES['thefile']['name'];. Весь 'трабл' был в том, что я добавлял строку xhr.setRequestHeader("Content-Type", "multipart/form-data;");. Убрал строку и всё заработало.

я в пхп скрипте делал print_r($_FILES); и выводил document.getElementById('ass').innerHTML=xhr.respo nseText; тут уже смотрел, что получает файл пхп. В итоге просто нужно было убрать строку setRequestHeader("Content-Type", "multipart/form-data");. Спасибо за помощь, может кому понадобится решение данного вопроса. Протестил на Хроме и IE работает!

Так вот, если бы вы сделали как я велел с самого начала, то увидели бы сообщение:

Missing boundary in multipart/form-data POST data....

Ну да, у вас там поди и уровень ошибок в 0. Чтоб не беспокоило.

error_reporting(-1);