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