CODE (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{
- /*
- из-за бага, в сафари этот метод не работает
- поэтому в случае неудачи, нужно пропустить этот шаг
- ссылка на баг [url]https://bugs.webkit.org/show_bug.cgi?id=101671[/url]
- пример, аналогичного скрипта,
- который тоже не работает в сафари [url]http://blueimp.github.io/jQuery-File-Upload/[/url]
- */
- 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); // удаляем элемент из массива
- // создаём визуализацию удаления. а затем перерисовываем таблицу обратной функцией
- // если этого не сделать то индексы у кнопок удалить не будут соответствовать индекса массива.
- $(this).parent().parent().fadeOut(function(){repaint_uplod_items();});
- }
- }
- return(false);
- });
- /* ------------------ Нажатие на кнопку отправить форму console.log(stopor.length); --------------------------------------------------------------*/
- $(function (){
- if($('a.form_send_btn').length) // определяет существование объекта на странице
- {
- $('a.form_send_btn').click(function(){ // присваиваем функцию
- var link = $(this).val(); // определяем ссылку ссылку для аякс запроса
- var this_obj = $(this); // получаем ссылку на обект по котором кликали
- var showerror = 0; //утанавливаем переменную отвечающую за вывод ошибки заполнения полей формы
- var params = 'uplod_images=1&second_param=sec_par'; // тут можно передать любые параметры запроса
- var alertmess = 'Необходимо заполнить обязательные поля'; // текст ошибки
- var data_files = new FormData();// переменная для работы с файлами
- $(this).parent().find('input,textarea').each(function(){ // ищем все поля в нужном контейнере
- if($(this))
- {
- // проверяем поля и заносим их значения в массив
- var this_title = $(this).attr('title');
- var this_name = $(this).attr('name');
- var this_value = $(this).val();
- // удаляем переносы строки, так как они не передаются обычные запросом почемуто
- this_value = this_value.replace(new RegExp("\n",'g')," ").replace(new RegExp("\r",'g')," ");
- if(this_value == this_title) this_value = '';
- if($(this).is('._need'))
- {
- if(this_value == '' || this_value == this_title)
- {
- showerror = 1;
- $(this).addClass('_error_filed_field');
- }
- else
- {
- $(this).removeClass('_error_filed_field');
- params += this_name+'='+this_value+'&';
- data_files.append(this_name, this_value);
- }
- }
- else
- {
- params += this_name+'='+this_value+'&';
- data_files.append(this_name, this_value);
- }
- }
- });
- if(showerror)
- {
- alert(alertmess);
- }
- else
- {
- // добавляем в массив данных файлы
- if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
- {
- $.each(otzivi_files_tmp, function(key, value)
- {
- data_files.append(key, value);
- });
- }
- // тут можно также передать данные в POST запросъ
- data_files.append('send_form', 1);
- $.ajax({
- // устанавливаем параметры запроса
- url: "../elan/img_elan",
- type: "POST",
- data: data_files,
- processData: false,
- contentType: false,
- beforeSend:function(){
- //действия которые будут выполнены до отправки запроса
- $(this_obj).parent().addClass('__loading'); // добавляем значёк загрузки для выбранного объекта (он может быть любой)
- },
- xhr: function(){
- /*
- функция отображения прогресса загрузки в процентах
- чтобы увидеть как оно работает нужно подгрузить файл побольше,
- иначе при загрузке маленьких файлов оно в 1 мгновение будет установлено в 100%
- побольше это 5-10 Мб
- */
- var xhr = new window.XMLHttpRequest();
- xhr.upload.addEventListener("progress", function(evt){
- if (evt.lengthComputable) {
- var percentComplete = evt.loaded / evt.total;
- $('#UploadProgress span').html(Math.ceil(percentComplete*100)); // отображаем прогресс загрузки
- }
- }, false);
- return xhr;
- },
- success: function(data){
- $('.__loading').removeClass('__loading'); // по окончанию загрузки убираем крутилку
- }
- });
- }
- return(false);
- });
- }
- });
- /* ------------------ Нажатие на кнопку отправить форму console.log(stopor.length); --------------------------------------------------------------*/
- /* ------------------ подготовка загрузки картинок //console.log(stopor.length); --------------------------------------------------------------*/
- // функция округления байтов
- function kilob(val)
- {
- if (val<=1024) return(number_format(val,0, '.', ' ')+' б');
- if (val>=1023 && val<1048576) return(number_format(val/1024,0, '.', ' ')+' Кб');
- if (val>=1048576) return(number_format(val/1048576,1, '.', ' ')+' Мб');
- }
- // функция number_format алаогичная php функции
- function number_format( number, decimals, dec_point, thousands_sep ) {
- // использование number_format(1234.5678, 2, '.', '');
- var i, j, kw, kd, km;
- if( isNaN(decimals = Math.abs(decimals)) ){
- decimals = 2;
- }
- if( dec_point == undefined )
- {
- dec_point = ",";
- }
- if( thousands_sep == undefined )
- {
- thousands_sep = ".";
- }
- i = parseInt(number = (+number || 0).toFixed(decimals)) + "";
- if( (j = i.length) > 3 ){
- j = j % 3;
- } else{
- j = 0;
- }
- km = (j ? i.substr(0, j) + thousands_sep : "");
- kw = i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep);
- //kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).slice(2) : "");
- kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).replace(/-/, 0).slice(2) : "");
- return km + kw + kd;
- }
- /* ------------------ подготовка загрузки картинок //console.log(stopor.length); --------------------------------------------------------------*/
- /// определение jQuery - конес
- });