Pull to refresh

Закачка больших файлов или Как обойти ограничения дешевого виртуального хостинга

Reading time 5 min
Views 42K
Однажды в очередной раз возникла задача о закачке относительно больших файлов. Говоря конкретно, клиент захотел заливать на сайт через админку видеоролики размером 20-40 мегабайт. Казалось бы, в наше просвещенное время подобный размер — это такая мелочь, о коей и говорить стыдно. Но внезапно все уперлось в настройки виртуального хостинга. Мы с ужасом обнаружили, что максимальный размер закачиваемого файла — 2M, и поменять эту цифру нет возможности. И менять хостинг по ряду причин нельзя — по крайней мере не сейчас.

Перед нами встает задача — обойти ограничения убогого виртуального хостинга. Сам принцип такого обхода очевиден: файл надо порезать на куски, залить частями, а на стороне сервера собрать в единое целое. Но делать это надо не вручную — пользователь должен выбрать файл и нажать на кнопку «Отправить». Как же это сделать?


Самая первая наша реакция — посмотреть возможности различных флеш-аплоадеров. Ведь не может быть, чтобы мировая техническая мысль не реализовала такой полезной вещи, как загрузка файла по частям. Перебираем последовательно Uploadify, SWFUpload, FancyUpload, jqUploader, jquery-transmit. Но все тщетно. Искомой фичи мы не видим. Вполне вероятно, что надо копать дальше, но время поджимает, и надо уже что-то делать…

Вышеописанное печально. Однако нам на руку играет тот факт, что это админка. Т.е. нам вовсе не нужно ориентироваться на кроссбраузерность. Достаточно того, что этот механизм будет работать на браузере клиента, каковым (о чудо!) является FF.

Тут же вспоминаем, что в FF последних версий есть возможность получить в строку содержимое файла, загруженного в поле file-upload. И в голову приходит желание разбивать эту строку на куски и закачивать частями, используя Ajax.

Клиентская часть


Сначала нарисуем необходимое в статическом HTML:

<form>
  <input type="file" id="myfile">
</form>

<a href="#" onClick="big_file_upload($('#myfile'))">Отправить</a>

Т.е. при нажатии на ссылку должна быть вызвана функция big_file_upload, в которую передается объект, из которого нужно взять содержимое файла. Обратите внимание на конструкуию $('#myfile'). Думаю, нет нужды подробнее останавливаться на необходимости подключения библиотеки jQuery, которую мы также будем использовать и для ajax-запросов при передачи файла на сервер.

Теперь нам надо написать ту самую функцию big_file_upload:

var upload_chunk_size = 120000;
// В этой переменной лежит размер кусков, на которые мы будем делить файл.
 
function big_file_upload(file) {
  // .....
}

Получение содержимого файла

Для получения содержимого файла будем использовать следующую конструкцию:

  var data = file.get(0).files.item(0).getAsDataURL();

Поясняю ее смысл:
  • file.get(0) — получение DOM-объекта из jQuery-объекта, переданного в функцию
  • files.item(0) — получение первого файла из списка. Здесь он у нас единственный, однако напомню, что уже есть возможность множественной закачки файлов из одного контрола.
  • getAsDataURL() — получение содержимого файла в формате Data:URL. Есть еще методы getAsText и getAsBinary, однако нам нужно передавать на сервер методом POST, поэтому желательно получить содержимое файла, закодированное в Base64.

Аналогичной конструкцией получаем имя файла:

  var filename = file.get(0).files.item(0).fileName;

Поскольку содержимое у нас в формате Data:URL, то неплохо было бы отрезать заголовочную часть, в которой находится информация о MIME-типе и способе кодирования. В более общем варианте нашей функции эту информацию надо бы использовать, но в данном примере она нам только будет мешаться при декодировании. Поэтому просто отрежем все по первую запятую (включительно), которой отделяется заголовок:

  var comma = data.indexOf(',');
  if (comma>0) data = data.substring(comma+1);

Отправка файла кусками

Здесь все банально:

 var pos = 0;
 
 while (pos<data.length) {
 
    $.post('/upload.php',{
      filename:filename,
      chunk:data.substring(pos,pos+upload_chunk_size)
    });
 
    pos += upload_chunk_size;
  }

Серверная часть


Теперь сделаем на сервере принимающий PHP-скрипт upload.php. В варианте для примера он также предельно прост:

  $filename = $_POST['filename'];
  $f = fopen("/dir/to/save/$filename","a");
  fputs($f,base64_decode($_POST['chunk']));
  fclose($f);

Файл открывается с опцией «а», т.е. предлагается не перезаписывать существующий файл, а дополнять его. Таким способом мы из кусков соберем целый файл.

Думаю, всем понятно, что данный скрипт должен лежать в закрытой админской части сайта чтобы к нему не имели доступа разные личности со стороны. Кроме того, имя файла и сам файл должны проверяться на валидность. Иначе — это даже не уязвимость, а… я и слова-то такого не знаю…

Пробуем запустить


Попробовали? Получилось? Держу пари, что получилось совсем не то, что ожидалось. Файл вроде бы закачался. Вроде бы даже длина правильная. А вот содержимое — какая-то каша.

Почему так получилось? Ответ прост: POST-запросы отправляются в асинхронном режиме по нескольку кусков одновременно, поэтому никто не гарантирует, что на сервер они будут приходить именно в той последовательности, в которой были поданы команды на отправку. Мало того, что никто не гарантирует, а я прямо-таки утверждаю, что никогда они не придут в нужной последовательности. Всегда будет получаться каша.

Поэтому, как это ни грустно, придется асинхронность отключить. Перед оправкой файла выполним следующее:

 $.ajaxSetup({async:false});

Теперь все нормально. Файл собирается в нужной последовательности, однако на время закачки исполнение прочих скриптов приостанавливается. Поэтому, чтобы не нервировать пользователя, было бы неплохо где-нибудь показывать процентики или прогресс-бар. Таким образом, работоспособный скрипт выглядит следующим образом:

var upload_chunk_size = 120000; // Размер куска
 
function big_file_upload(file) {
  var data = file.get(0).files.item(0).getAsDataURL(); // Получаем содержимое файла
  var filename = file.get(0).files.item(0).fileName; // Получаем имя файла
 
  var comma = data.indexOf(','); 
  if (comma>0) data = data.substring(comma+1); // Отрезаем заголовок Data::URL
 
  var pos = 0;
  $.ajaxSetup({async:false}); // Отключаем асинхронность
 
  while (pos<data.length) {
 
    $.post('/upload.php',{ // Отправляем POST
      filename:filename, // Имя файла
      chunk:data.substring(pos,pos+upload_chunk_size) // Кусок файлв
    });
 
    pos += upload_chunk_size;
 
    var p = Math.round(pos*100/data.length); // Вычисляем процент отправленного
    $('#progress').text(p+'%'); // Рисуем цифирь для спокойствия пользователя
  }
}

Недостатки


Как же без них…

  1. В данном примере предполагается, что метод getAsDataURL всегда возвращает данные, закодированные в base64. На самом деле я бы не стал биться об заклад, что так будет всегда. По-хорошему, заголовок надо не выкидывать, а передавать серверной части, которую, в свою очередь, научить обрабатывать данные, закодированные разными способами.
  2. Файл, отправленный два раза, запишется на сервере два раза. Причем дополнит сам себя. Чтобы избежать этого, видимо, нужно передавать кроме имени еще и какой-то уникальный идентификатор закачки. Но это, вообще говоря, вопрос способа формирования и передачи имени файла. Здесь универсального рецепта нет и быть не может.
  3. Клиентский скрипт исполняется долго (в зависимости от размера файла и толщины канала), и FF может даже поинтересоваться: вы, мол, уверены ли, что надо ждать окончания, или убить его чтоб не мучался?
  4. Кроссбраузерность. Получение содержимого файла, увы, работает только на FF. Проверено на 3.0, 3.5 и 3.6. На более ранних не проверялось за неимением таковых под рукой. Сами разработчики FF рекомендуют вместо это способа пользоваться FileAPI, однако оно появилось только в 3.6.
  5. Действительно большие файлы (сотни мегабайт, гигабайты) закачать таким способом не получится. Предел зависит от объема памяти, доступной браузеру.


Что сделать?


Вероятно, надо попробовать все-таки в асинхронном режиме. Для каждого куска передавать еще и информацию о его расположении внутри файла. При этом серверная часть серьезно усложнится.
Tags:
Hubs:
+23
Comments 46
Comments Comments 46

Articles

Information

Website
www.techart.ru
Registered
Founded
Employees
101–200 employees
Location
Россия