Почему после загрузки на сервер файлов XMLHttpRequest() методом FileReader, получаются файлы большего размера?

Question

[MaxKondratenko]

Загружаю файлы на сервер, но после загрузки получаются большего размера...

function uploadFile(file) {
  
  alert(file.name);
  var reader = new FileReader();
 
  reader.onload = function() {    
    var xhr = new XMLHttpRequest();    
    
    xhr.upload.addEventListener("progress", function(e) {
      if (e.lengthComputable) {
        var progress = (e.loaded * 100) / e.total;
			
//			alert('Loading : = '+progress+' file: '+file.name+'');
	}
    }, false);
    
    /* ... можно обрабатывать еще события load и error объекта xhr.upload ... */
 
    xhr.onreadystatechange = function () {
      if (this.readyState == 4) {
        if(this.status == 200) {
          	       alert(xhr.responseText);
		  		  
                  } else {
		  alert('error');
        }
      }
    };
    
    xhr.open('POST', '../lib/upload.php');
   var boundary = "xxxxxxxxx";
        // Устанавливаем заголовки.
        xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary="' + boundary + '"');
        xhr.setRequestHeader('Cache-Control', 'no-cache');

        // Формируем тело запроса.
        var body = "--" + boundary + "\r\n";
        body += "Content-Disposition: form-data; name='myFile'; filename='" + unescape( encodeURIComponent(file.name)) + "'\r\n"; // unescape позволит отправлять файлы с русскоязычными именами без проблем.
        body += "Content-Type: application/octet-stream\r\n\r\n";
        body += reader.result + "\r\n";
        body += "--" + boundary + "--";
    if(xhr.sendAsBinary) {
      // только для firefox
      xhr.sendAsBinary(body);
    } else {
      // chrome (так гласит спецификация W3C)
      xhr.send(body);
    }
  };
  // Читаем файл
  reader.readAsBinaryString(file);
}

метод описанный на тысячи сайтов... и тупо скопированный ...
на серверной стороне выглядит так :

<?php
$uploaddir = '../uploads/';
$uploadfile = $uploaddir.basename($_FILES['myFile']['name']);

echo '<pre>';
if (move_uploaded_file($_FILES['myFile']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}
echo 'Here is some more debugging info:';

print_r($_FILES);

print "</pre>";
?>

Answer 1

[Евгений Петров]

Как советуют на stackoverflow, нужно читать файл по-другому:

reader.readAsBinaryString(file) => reader.readAsDataURL(file)

Comments

[MaxKondratenko]

пробовал...
readAsDataURL

Array
(
[myFile] => Array
(
[name] => _4.jpg
[type] => application/octet-stream
[tmp_name] => /Applications/MAMP/tmp/php/phpkDUlUA
[error] => 0
[size] => 46559
)

)

при readAsBinaryString получается это

Array
(
[myFile] => Array
(
[name] => _4.jpg
[type] => application/octet-stream
[tmp_name] => /Applications/MAMP/tmp/php/phpmk7S6Y
[error] => 0
[size] => 52503
)

)

реальный размер файла на диске => 34 902

[Евгений Петров]

@MaxKondratenko а с png можете провести эксперимент?

[MaxKondratenko]

[myFile] => Array
(
[name] => fapatarat.png
[type] => application/octet-stream
[tmp_name] => /Applications/MAMP/tmp/php/phpNiIbLD
[error] => 0
[size] => 13130
)

)

реальный размер =>9 831

[Евгений Петров]

@MaxKondratenko и ещё — размер на диске — это бинарный файл, а в базе — base64, которая по-любому будет больше на 30-40%. Попробуйте дать ссылку на файл, сохранённый в базе и сохранить на диск. Вот потом и сравнивайте с исходником.

[MaxKondratenko]

Подробнее пожалуйста , я только учусь...

[Евгений Петров]

@MaxKondratenko ваша картинка хранится на диске в формате jpg. Для передачи в вебе она обязаны быть кодирована в текстовый формат.

Для этого можно использовать как правило:
— utf-8, считающийся базовым (для кодирования бинарных файлов — редкость)
— base64, который вошёл в обиход со времён первых почтовых клиентов (как правило, он и используется)

В любом случае размер полученного в результате кодирования текста будет превышать исходный размер файла. Величина разницы сильно колеблется. Для очень грубой прикидки примерно 30-40% в случае base64.

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

[MaxKondratenko]

я не храню файл в базе ... я получаю его таким образом : var data = e.originalEvent.dataTransfer;
var files = data.files;
uploadFile(files[0]);

[Евгений Петров]

@MaxKondratenko вы получаете кодированный в base64 текст. В своём скрипте на сервере с бинарными файлами вы не работаете.

[MaxKondratenko]

Т.е. насколько я понимаю мне нужно этот текст декодировать и уже потом сохранять в файл ?
В любом случае большое спасибо за помощь, начинает проясняться в голове.

[MaxKondratenko]

@Petroveg В общем всё получилось спасибо ! Переделал скрипт на стороне сервера, ниже выложу то что получилось ! Ещё раз огромное спасибо !

Answer 2

[MaxKondratenko]

Спасибо user
С его помощью переписал скрипт на стороне сервера и получилось следующие.
Плюс добавил рандомное имя файла! Всё собрано по кускам с разных ресурсов. Часть решения взял отсюда:

<?php
$uploaddir = '../uploads/';
$uploadfile = $uploaddir.basename($_FILES['myFile']['name']);

if ($file_handle = fopen($_FILES['myFile']['tmp_name'], "r")) {
	while (!feof($file_handle)) {
		$encodedData = fgets($file_handle);
		//echo $encodedData;
	}
	fclose($file_handle);
}
else echo 'произошла ошибка!';

// Выделим данные
	$split = explode(',', $encodedData);
	$encodedData = end($split);

// Декодируем данные, закодированные алгоритмом MIME base64
	$encodedData = str_replace(' ','+',$encodedData);
	$decocedData = base64_decode($encodedData);

$file = $decocedData;
$name = $_FILES['myFile']['name'];

// Получаем расширение файла
$getMime = explode('.', $name);
$mime = end($getMime);

// Мы будем создавать произвольное имя!
$randomName = substr_replace(sha1(microtime(true)), '', 12).'.'.$mime;

// Создаем изображение на сервере
if(file_put_contents($uploaddir.$randomName, $decocedData)) {
   echo $randomName.":загружен успешно";
}
else {
   // Показать сообщение об ошибке, если что-то пойдет не так.
   echo "Что-то пошло не так. Убедитесь, что файл не поврежден!";
}
?>