Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php не аяксом, а просто переходило как обычно переходит форма методом пост. Вот сам скрипт: | Код |
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);
|
|
Загрузка изображений на сайт 
Загрузка ...
