Показать сообщение отдельно
  #1 (permalink)  
Старый 09.04.2014, 16:54
Интересующийся
Отправить личное сообщение для FactoREAL Посмотреть профиль Найти все сообщения от FactoREAL
 
Регистрация: 09.04.2014
Сообщений: 14

XmlHttpRequest.send не корректно работает в Chrome
Здравствуйте. Пытаюсь реализовать передачу файлов (изображений) при помощи js на сервер (php скрипту). Реализую следующим образом (вкратце):
файл у клиента выбирается при помощи
<input type="file" multiple="true">

затем он считывается при помощи
$("input[type=file]").change(function(){
	var f = $(this)[0].files;
	displayFiles(f);
});

function displayFiles(files) {
...
var reader = new FileReader();
	reader.onload = (function(aImg) {
		return function(e) {
			aImg.attr('src', e.target.result);
		};
	})(li.imgbox.img);
	reader.readAsDataURL(file);
}

потом, при клике на кнопку все выбранные файлы загружаются на сервер
xhr = new XMLHttpRequest();
reader = new FileReader();
...
reader.onload = function() {
 xhr.open("POST", params.url);
 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='"+(params.fieldName || 'file')+"'; filename='" + params.file.name + "'\r\n";
 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 spec.)
	xhr.send(body);
 }
}
reader.readAsBinaryString(params.file);

на сервере пока что происходит простейший прием файла php скриптом:
$uploadedFile = "upload/".$_FILES['new_pic']['name'];
if(is_uploaded_file($_FILES['new_pic']['tmp_name'])) {
	if (move_uploaded_file($_FILES['new_pic']['tmp_name'], $uploadedFile)) {
		$data['success'] = "Удачно передано";
	} else {
		$file_error=true;
		$data['errors'] = "не удалось сохранить файл";
	}
}

проблема в том, что данная реализация прекрасно работает в браузере Firefox, но отказывается работать в Google Chrome. Если точнее, то в хроме загрузка файла на сервер в принципе происходит, но файл после этого становится большего объема чем исходный и нечитаймый. т.е. если исходный файл pic.jpg весил 1Мб, то после передачи, на сервере он весит уже 1,2Мб и не открывается на просмотр. Короче становится "битым". А так же в хроме почему-то не получается передать большие файлы (около 2Мб) - $_FILES['error'] возвращает 1 (превышен допустимый объем передаваемого файла). Хотя тот же самый файл прекрасно передается в браузере Firefox... Я так думаю что метод send() объекта XmlHttpRequest передает данные не корректно, т.к. метод sendAsBinary() в Firefox работает как надо.

Последний раз редактировалось FactoREAL, 09.04.2014 в 16:59.
Ответить с цитированием