Возможный дубликат:
Загрузка файла Ajax
Можно ли написать запрос ajax с JQuery, который «отправляет» форму с файловым полем? Я хочу сделать это, потому что таким образом я могу заставить пользователя загружать файл, не выходя из текущей страницы.
Как мне написать вызов $ .ajax ()? и, в частности, как я должен установить в ajax вызов поля файла?
EDIT: Я бы хотел использовать только основные функции JQuery, без плагинов.
Благодарю.
Чтобы поддерживать совместимость с самым широким диапазоном браузеров, это нужно делать с помощью скрытого iframe.
Вот пример кода, чтобы продемонстрировать, что я имею в виду:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe> <form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data"> <input type="file" name="file_upload" /> <input type="button" id="upload_btn" value="Upload file" /> <label for="name">Name</label> <input type="text" name="name" id="name" /> <input type="submit" value="Next step" /> </form> <script type="text/javascript"> var btn = document.getElementById('upload_btn'); btn.onclick = function(){ var form_elem = document.forms[0]; // direct file uploads through the hidden iframe form_elem.action = '/test_file.php'; form_elem.target = 'my_iframe'; // submit the form form_elem.submit(); }; </script> Есть проекты, которые делают это проще, например Plupload
Это тяжело. Вы гораздо лучше используете сервис, который уже существует.
Я сделал это недавно на сайте, потому что мне нужна вся форма для отправки без перезагрузки страницы, и uploadify был лучшим файловым загрузчиком AJAX, который я нашел.