Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php не аяксом, а просто переходило как обычно переходит форма методом пост. Вот сам скрипт: Код (Javascript): jQuery(function($) { /// определение jQuery - начало //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file"> var otzivi_files; var otzivi_files_tmp = []; function prepareUpload(event) { /* одна переменная временная в неё заносится список полученные сразу после выбора файлов вторая содержит весь список включая и файлы выбранные ранее */ // присвоение только что выбранных файлов otzivi_files = event.target.files; // обновление общего массива файлов $(otzivi_files).each(function(){ otzivi_files_tmp = otzivi_files_tmp.concat(this); }); // перерисовка списка после выбора дополнительных файлов $(function (){ repaint_uplod_items(); }); } /* эта функция отслеживает изменение поля <input type="file"> и добавляет в общий массив выбранные файлы посредством обратного вызова */ $('input[type=file]').on('change', prepareUpload); function repaint_uplod_items() { /* этот код помещён в функцию так как: после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp у кнопки "удалить" остаются старые индексы в этом случае уже нельзя правильно удалить элементы кнопками из-за нарушения первоначальных индексов поэтому, после удаления элемента, следует перерисовать их список заново. */ // выбираем контейнер для списка var fileList = $('#fileList'); // очищаем от предыдущего кода $(fileList).html(''); // формируем визуальную таблицу из массива файлов var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>'; for (var i=0; i < otzivi_files_tmp.length; i++) { // устанавливаем ссылку на текущий объект var this_obj = otzivi_files_tmp[i]; // получаем ссылку на картинку для использования в img src try{ /* из-за бага, в сафари этот метод не работает поэтому в случае неудачи, нужно пропустить этот шаг ссылка на баг https://bugs.webkit.org/show_bug.cgi?id=101671 пример, аналогичного скрипта, который тоже не работает в сафари http://blueimp.github.io/jQuery-File-Upload/ */ img_src = window.URL.createObjectURL(this_obj); } catch(e) {} // формируем таблицу // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать table += '<td>'; table += '<div class="image_thummb">'; if('undefined' != typeof img_src) table += '<a class="del_uplod_image" href="#'+i+'"><img class="del_im" src="css/x.png" /></a><img src="'+img_src+'" class="im" alt="" border="0" />'; table += '</div>'; table += '</td>'; table += ''; if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку } table += '</tr></table>'; $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу } /* функция которая удаляет из массива элементы после этого наглядно показывает удаление элемента из списка fadeOut() и перерисовывает таблицу выбранных файлов использование $('body').on('click' ... обусловлено тем, что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click() */ $('body').on('click', 'a.del_uplod_image', function(){ if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length) { // проверяем массив и элемент массива на существование if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id]) { otzivi_files_tmp.splice(to_del_id,1);
http://code.runnable.com/V6g3OfA2Bv...data-ajax-files-upload-for-php-and-javascript PHP: <?php header('Content-Type: text/html; charset=utf-8'); if ($_SERVER['REQUEST_METHOD'] == 'POST') { var_export($_FILES); echo PHP_EOL; var_export($_POST); exit(); } ?> <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <form id="form"> <input type="file" name="file[]" multiple> <input type="file" name="file[]" multiple> <input type="text" id="test" name="test" value="Hello word!"> <input type="submit" name="Upload"> </form> <pre id="result">no result</pre> <script type="text/javascript"> $(function() { $( "#form" ).submit(function( event ) { var formData = new FormData($('#form').get(0)); formData.append('custom', 'hello custom'); /* // manual var formData = new FormData(); formData.append('test', $("#test").val()); $.each( $("#form input[type=file]"), function( input_key, input_value ) { $.each( input_value.files, function( file_key, file_value ) { formData.append('file[]', file_value); }); }); */ var jqxhr = $.ajax({ method: "POST", url: "index.php", data: formData, processData: false, contentType: false }) .done(function(data) { $("#result").html(data); }) .fail(function() { alert( "error" ); }); event.preventDefault(); }); }); </script> </body> </html>
Можно, главное чтобы имя было массивом, например обычно имя это буквы и цифры, а чтобы дать понять что это массив надо добавить [] в конец имени, например myfile[] - вот так должно работать