Всем доброго времени суток!
Нужен модуль для загрузки фотографий на сервер. Нашел прикольную реализацию с использованием HTML5:
http://habrahabr.ru/blogs/webdev/109079/
Ссылка с исходниками:
http://safron.su/playground/html5uploader/full.zip
Скачал, поставил, но - не рабтает! Файлы выбирает, а при нажатии на закачку ничего не происходит.
Один баг нашел - у меня Opera 11.50, а она не поддерживает XMLHttpRequest2, так что все строки где встречается 'xhr.upload' (файл uploaderObject.js) нужно убрать (с головой, конечно). Для простоты вставил функцию uploadFile(file, url) из текста статьи (она отличается от того, что автор положил в исходники). Все равно не работает.
Вот ключевые точки кода:
interface.js - нажимаем на кнопку «Загрузить»
$("#upload-all").click(function() {
imgList.find('li').each(function() {
var uploadItem = this;
var pBar = $(uploadItem).find('.progress');
log('Начинаем загрузку `'+uploadItem.file.name+'`...');
uploadFile(uploadItem.file,'./upload.php');
});
});
uploaderObject.js
function uploadFile(file, url) {
var reader = new FileReader();
reader.onload = function() {
var xhr = new XMLHttpRequest();
// xhr.addEventListener("progress", function(e) {
// if (e.lengthComputable) {
// var progress = (e.loaded * 100) / e.total;
// /* ... обновляем инфу о процессе загрузки ... */
// }
// }, false);
//
/* ... можно обрабатывать еще события load и error объекта xhr.upload ... */
xhr.onprogress=function(e) {
if (e.lengthComputable) {
var progress = (e.loaded * 100) / e.total;
/* ... обновляем инфу о процессе загрузки ... */
console.log("A progress...\n");
}
};
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if(this.status == 200) {
/* ... все ок! смотрим в this.responseText ... */
console.log("The status is Ok.\n");
} else {
/* ... ошибка! ... */
console.log("The status is NOT Ok.\n");
}
}
};
xhr.open("POST", 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='myFile'; filename='" + file.name + "'\r\n";
body += "Content-Type: application/octet-stream\r\n\r\n";
body += reader.result + "\r\n";
body += "--" + boundary + "--";
console.log("Ready to send file '"+file.name+"'...\n");
if(xhr.sendAsBinary) {
// только для firefox
xhr.sendAsBinary(body);
} else {
// chrome (так гласит спецификация W3C)
xhr.send(body);
}
};
// Читаем файл
reader.readAsBinaryString(file);
};
В upload.php я вообще не понимаю что писать. У автора там какой-то бред, не предполагающий сохранение файла. Я сделал вот это:
$uploaddir = getcwd();
$uploadfile = $uploaddir.basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile);
Результатом выполнения являются фразы «Начинаем загрузку...» для каждого из двух файлов, два сообщения «The status is Ok.» и два «Ready to send file XXX...». Сетевой активности нет!
У меня в голове полная чехарда. Подскажите, что не так?