Всем привет, очень нужна помощь. Суть вопроса такова, есть форма обратной связи, к ней можно прикрепить файл, мне этот файл необходимо на почту отправить, и все это без перезагрузки страницы. Мои знания jQuery на уровне $('#id').click(function(){}); и все Код (Javascript): // нагуглил скрипт (function($){ var files; $('input[type=file]').change(function(){ files = this.files; }); // типа тут мы складываем данные из поля в переменную // следующим шагом по клику создаем объект $("#form_btn").click(function(event){ var data = new FormData(); // вот тут мне непонятно $.each( files, function( key, value ){ data.append( key, value ); }); // и отправляем запрос $.ajax({ url: './submit.php', type: 'POST', data: data, cache: false, dataType: 'json', processData: false, // Не обрабатываем файлы (Don't process the files) contentType: false, // Так jQuery скажет серверу что это строковой запрос success: function( respond, textStatus, jqXHR ){ // Если все ОК if( typeof respond.error === 'undefined' ){ // Файлы успешно загружены, делаем что нибудь здесь // выведем пути к загруженным файлам в блок '.ajax-respond' var files_path = respond.files; var html = ''; $.each( files_path, function( key, val ){ html += val +'<br>'; } ) $('.ajax-respond').html( html ); } else{ console.log('ОШИБКИ ОТВЕТА сервера: ' + respond.error ); } }, error: function( jqXHR, textStatus, errorThrown ){ console.log('ОШИБКИ AJAX запроса: ' + textStatus ); } }); }); у меня сложность заключается в том, что нет понимания как эта хрень работает, нужна помощь именно объяснить некоторые моменты. - помочь раскурить FormData - как в этот объект складываются картинки и как туда положить массив картинок - в success тут вообще мне ничего непонятно, как тут выводить результат работы submit.php т.е. как сложить несколько картинок в объект, отправить его и в каком виде они туда придут, и как ответ отправляется за помощь готов угостить пивом ))
Много лишнего в коде. Всё можно сделать гораздо проще: Код (Javascript): $(function() { $('form_selector').on('submit', function(e) { e.preventDefault(); const formData = new FormData(this); // все данные формы в FormData $.ajax({ // другие опции data: formData }); }); }); Для загрузки нескольких файлов, не забываем имя файлового поля записать, как массив HTML: <input type="file" name="files[]" multiple> --- Добавлено --- Зависит от формата данных, которые вы возвращаете на Ajax-запрос.
Код (Javascript): .on( 'submit', 'form', function ( e ) { e.preventDefault(); var obj = new FormData( $( this ).get(0) ); $.ajax( { url: $( this ).attr( 'action' ), type: $( this ).attr( 'method' ), contentType: false, processData: false, data: obj, dataType: 'JSON', success: function ( json ) { // } }); });
Вот, кстати, это ресурс мне попадался, но я на него только посмотрел, смутила переменна $that. А вот что там есть еще пару уроков по основам я не заметил, вот их сейчас и начну. Мож к утру че-нить получится.
я просто впервые встрелил это, и было непонятно, а на самом деле ресурс зачет. Столько разных вариантов прошлой ночью пробовал, это ужас, и теперь я понимаю, почему они не работали. Конечно, еще есть о чем почитать, но в целом все встало на свои места. Делаю сайт для типографии, и там нужна загрузка файлов большого размера, столкнулся с проблемой размера, вроде как решил через .htaccess, надо еще прелоадер делать, векторная графика долго грузится. но это уже совсем другая история, всем сапсибо.