Проблема отправки через аякс файлов в Google Chrome

Примерно полгода назад, я с одной из групп веб-разработчиков столкнулся с проблемой работы AJAX’а в Google Chrome. Проблема была в том что, скрипт работающий во всех браузерах отказывался работать в Google Chrome. К сожалению, скриншотов не сохранилось на которых было показано что файл при отправки данных AJAX не появлялся в «переменной» браузера. А точнее при отправке формы, файл терялся. Если посмотреть стек через Инструменты разработчка Google Chrome, то можно было увидеть что там пусто. Проблема была решена отправкой файла в отдельной форме, скажем в форме «отправка». В которой кроме самого файла ничего и не было. А в исходной форме, скажем «выбрать файл» есть кнопка отправки и элемент input для файла. Читаем подробней как избаваться от этой проблемы.
Для отправки использовался AJAX jQuery. В скрипте вешаем на кнопку в форме «выбрать файл» обработчик $(‘#pic_sub’).click(…); которая делает копию текущего элемента файла, и перемещаем в форму «отправка», $(‘#ajax_form’).append($(‘#pic_file’)) для отправки её серверу. Листинг подробно документированы и разобраться не сложно. Основное отличие этого скрипта от тех которые обычно используют в том, что элемент инпут с файлом не клонируется в форму для отправки серверу, а перемещается в неё.
Ход выполнения такой: На странице есть две формы. Одна из них пустая, другая с элементом input и с кнопкой для отправки как я указал выше. В форме «выбрать файл», пользователь указывает файл, нажимает кнопку. Дальше происходит вот что: элемент input клонируется, переименовывается и остается в текущей форме. А тот что был, то есть исходный, перемещается в пустую форму для отправки. Отправка происходит также в скрипте. После передачи файла, клонированный элемент input, который остался в форме меняет имя на начальное, которое было до клонирования, а input в форме «отправка» удаляется, таким образом всё приходит в начальное состояние. Если из формы для отправки не удалить перемещенный input, то файла не измениться. Так что в таком случае, после отправки первого файла, какой бы вы файл дальше не отправляли, всегда отправиться тот который вы отправили первым.
Проблем быть не должно, в коде есть комментарии по которым очень просто разобраться в нём (надеюсь, это так), потому что каждая строка документирована, а функции простые как пирожок на полочке. =)

<script type="text/javascript">
   jQuery(document).ready(
      function(){
         // отправка завершена и получен ответ
         $('#ajax_form').ajaxForm(
            function(data){
               // возврат ajax помещаем в блог UserInfoDiv
               $('#UserInfoDiv').html(data);
               // скрываем изображение загрузки
               $('#img_load').hide(); 

               // Переименовываем клонированный объект
               $('#pic_file').remove();
               $('#pic_file_clone').attr('id','pic_file');
            }
         );

         // отправка аякс
         $('#pic_sub').click(
            function(){
               // отображаем изображение загрузки
               $('#img_load').show(); 

               // Клонируем объект
               var pic_file_clone = $('#pic_file').clone().attr('id','pic_file_clone');
               $('#pic_file').after(pic_file_clone);

               // Перемещаем не клонированый объект для отправки в форму аякс
               $('#ajax_form').append($('#pic_file'));

               // Отправляем форму
               $('#ajax_form').submit();
            }
         );
      }
   );
</script>
<style type="text/css">
	#ajax_file_form {
		display:none;
	}
</style>
<div id="UserInfoDiv" style="border: solid 1px;">возврат AJAXа</div>

<form id="ajax_form" enctype="multipart/form-data" method="post" action="/temp/f">
   <fieldset style="display:none;">
      <input type="hidden" name="_method" value="POST" />
   </fieldset>	
</form>


<form id="pic_form" enctype="multipart/form-data" method="post" action="/temp/f">
	<fieldset style="display:none;">
		<input type="hidden" name="_method" value="POST">
	</fieldset>
	<div class="input text">
		<label for="pic_formTxtsend">Введите имя файла: </label>
		<input name="data[pic_form][txtsend]" type="text" value="" id="pic_formTxtsend">
	</div>
	<div class="input file">
		<label for="pic_file">Пиктограмма: </label>
		<input type="file" name="data[pic_form][pic]" id="pic_file" value="">
	</div>
	<input type="button" value="Upload" id="pic_sub">
	<img id="img_load" class="indicc" src="load.gif" style="display: none;">
</form>

Запись опубликована в рубрике Без рубрики. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*