Примерно полгода назад, я с одной из групп веб-разработчиков столкнулся с проблемой работы 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>