Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Прередача lданных

Страниц (1): [1]
 

1. beste - 18 Февраля, 2017 - 08:32:28 - перейти к сообщению
Скрипт загружает файлы с предпросмотром. Когда я кликаю отправить не чего не происходит прочему нет перехода на url: "../elan/img_elan" помогите пожалуйста разобратся
CODE (javascript):
скопировать код в буфер обмена
  1. jQuery(function($) {
  2. /// определение jQuery - начало
  3.  
  4.  
  5.  
  6.     //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file">
  7.  
  8.     var otzivi_files;
  9.     var otzivi_files_tmp = [];
  10.     function prepareUpload(event)
  11.     {
  12.         /*
  13.             одна переменная временная
  14.             в неё заносится список полученные сразу после выбора файлов
  15.             вторая содержит весь список включая и файлы выбранные ранее
  16.         */
  17.  
  18.         // присвоение только что выбранных файлов
  19.         otzivi_files = event.target.files;
  20.  
  21.  
  22.         // обновление общего массива файлов
  23.         $(otzivi_files).each(function(){
  24.             otzivi_files_tmp = otzivi_files_tmp.concat(this);
  25.         });
  26.  
  27.         // перерисовка списка после выбора дополнительных файлов
  28.         $(function (){
  29.             repaint_uplod_items();
  30.         });
  31.  
  32.     }
  33.  
  34.  
  35.     /*
  36.         эта функция отслеживает изменение поля <input type="file">
  37.         и добавляет в общий массив выбранные файлы посредством обратного вызова
  38.     */
  39.     $('input[type=file]').on('change', prepareUpload);
  40.  
  41.     function repaint_uplod_items()
  42.     {
  43.         /*
  44.         этот код помещён в функцию
  45.         так как:
  46.         после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp
  47.         у кнопки "удалить" остаются старые индексы
  48.         в этом случае уже нельзя правильно удалить элементы кнопками
  49.         из-за нарушения первоначальных индексов
  50.         поэтому, после удаления элемента, следует перерисовать их список заново.
  51.         */
  52.  
  53.         // выбираем контейнер для списка
  54.         var fileList = $('#fileList');
  55.  
  56.         // очищаем от предыдущего кода
  57.         $(fileList).html('');
  58.  
  59.         // формируем визуальную таблицу из массива файлов
  60.         var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>';
  61.         for (var i=0; i < otzivi_files_tmp.length; i++) {
  62.  
  63.             // устанавливаем ссылку на текущий объект
  64.             var this_obj = otzivi_files_tmp[i];
  65.  
  66.             // получаем ссылку на картинку для использования в img src
  67.             try{
  68.  
  69.                 /*
  70.                     из-за бага, в сафари этот метод не работает
  71.                     поэтому в случае неудачи, нужно пропустить этот шаг
  72.                     ссылка на баг [url]https://bugs.webkit.org/show_bug.cgi?id=101671[/url]
  73.                     пример, аналогичного скрипта,
  74.                     который тоже не работает в сафари [url]http://blueimp.github.io/jQuery-File-Upload/[/url]
  75.                 */
  76.  
  77.                 img_src = window.URL.createObjectURL(this_obj);
  78.             } catch(e) {}
  79.  
  80.  
  81.             // формируем таблицу
  82.             // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать
  83.  
  84.             table += '<td>';
  85.             table += '<div class="image_thummb">';
  86.             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" />';
  87.             table += '</div>';
  88.             table += '</td>';
  89.             table += '';
  90.             if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку
  91.  
  92.         }
  93.         table += '</tr></table>';
  94.         $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу
  95.     }
  96.  
  97.  
  98.  
  99.  
  100.     /*
  101.         функция которая удаляет из массива элементы
  102.         после этого наглядно показывает удаление элемента из списка fadeOut()
  103.         и перерисовывает таблицу выбранных файлов
  104.         использование $('body').on('click' ... обусловлено тем,
  105.         что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click()
  106.     */
  107.     $('body').on('click', 'a.del_uplod_image', function(){
  108.         if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка
  109.         var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла
  110.         if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
  111.         {
  112.             // проверяем массив и элемент массива на существование
  113.             if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id])
  114.             {
  115.                 otzivi_files_tmp.splice(to_del_id,1); // удаляем элемент из массива
  116.  
  117.                 // создаём визуализацию удаления. а затем перерисовываем таблицу обратной функцией
  118.                 // если этого не сделать то индексы у кнопок удалить не будут соответствовать индекса массива.
  119.                 $(this).parent().parent().fadeOut(function(){repaint_uplod_items();});
  120.             }
  121.         }
  122.         return(false);
  123.     });
  124.  
  125.  
  126.     /* ------------------ Нажатие на кнопку отправить форму console.log(stopor.length); --------------------------------------------------------------*/
  127.  
  128.         $(function (){
  129.  
  130.             if($('a.form_send_btn').length) // определяет существование объекта на странице
  131.             {
  132.                 $('a.form_send_btn').click(function(){  // присваиваем функцию
  133.                     var link    = $(this).val();  // определяем ссылку ссылку для аякс запроса
  134.                     var this_obj    = $(this); // получаем ссылку на обект по котором кликали
  135.                     var showerror   = 0; //утанавливаем переменную отвечающую за вывод ошибки заполнения полей формы
  136.                     var params      = 'uplod_images=1&second_param=sec_par'; // тут можно передать любые параметры запроса
  137.                     var alertmess   = 'Необходимо заполнить обязательные поля'; // текст ошибки
  138.                     var data_files  = new FormData();// переменная для работы с файлами
  139.                     $(this).parent().find('input,textarea').each(function(){ // ищем все поля в нужном контейнере
  140.                         if($(this))
  141.                         {
  142.                             // проверяем поля и заносим их значения в массив
  143.                             var this_title = $(this).attr('title');
  144.                             var this_name  = $(this).attr('name');
  145.                             var this_value = $(this).val();
  146.  
  147.                             // удаляем переносы строки, так как они не передаются обычные запросом почемуто
  148.                             this_value = this_value.replace(new RegExp("\n",'g')," ").replace(new RegExp("\r",'g')," ");
  149.                             if(this_value == this_title) this_value = '';
  150.                             if($(this).is('._need'))
  151.                             {
  152.                                 if(this_value == '' || this_value == this_title)
  153.                                 {
  154.                                     showerror = 1;
  155.                                     $(this).addClass('_error_filed_field');
  156.                                 }
  157.                                 else
  158.                                 {
  159.                                     $(this).removeClass('_error_filed_field');
  160.                                     params += this_name+'='+this_value+'&';
  161.                                     data_files.append(this_name, this_value);
  162.                                 }
  163.                             }
  164.                             else
  165.                             {
  166.                                 params += this_name+'='+this_value+'&';
  167.                                 data_files.append(this_name, this_value);
  168.                             }
  169.                         }
  170.                     });
  171.  
  172.                     if(showerror)
  173.                     {
  174.                         alert(alertmess);
  175.                     }
  176.                     else
  177.                     {
  178.                         // добавляем в массив данных файлы
  179.                         if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
  180.                         {
  181.                             $.each(otzivi_files_tmp, function(key, value)
  182.                             {
  183.                                 data_files.append(key, value);
  184.                             });
  185.                         }
  186.  
  187.                         // тут можно также передать данные в POST запросъ
  188.                         data_files.append('send_form', 1);
  189.                         $.ajax({
  190.                            // устанавливаем параметры запроса
  191.                             url: "../elan/img_elan",
  192.                             type: "POST",
  193.                             data: data_files,
  194.                             processData: false,
  195.                             contentType: false,
  196.                             beforeSend:function(){
  197.                                 //действия которые будут выполнены до отправки запроса
  198.                                 $(this_obj).parent().addClass('__loading'); // добавляем значёк загрузки для выбранного объекта (он может быть любой)
  199.                             },
  200.                             xhr: function(){
  201.  
  202.                                 /*
  203.                                  функция отображения прогресса загрузки в процентах
  204.                                  чтобы увидеть как оно работает нужно подгрузить файл побольше,
  205.                                  иначе при загрузке маленьких файлов оно в 1 мгновение будет установлено в 100%
  206.                                  побольше это 5-10 Мб
  207.                                 */
  208.  
  209.                                 var xhr = new window.XMLHttpRequest();
  210.                                 xhr.upload.addEventListener("progress", function(evt){
  211.                                     if (evt.lengthComputable) {
  212.                                     var percentComplete = evt.loaded / evt.total;
  213.                                         $('#UploadProgress span').html(Math.ceil(percentComplete*100)); // отображаем прогресс загрузки
  214.                                     }
  215.                                 }, false);
  216.                                 return xhr;
  217.                             },
  218.                             success: function(data){
  219.                                 $('.__loading').removeClass('__loading'); // по окончанию загрузки убираем крутилку
  220.                             }
  221.                         });
  222.                     }
  223.                     return(false);
  224.                 });
  225.             }
  226.  
  227.         });
  228.  
  229.     /* ------------------ Нажатие на кнопку отправить форму console.log(stopor.length); --------------------------------------------------------------*/
  230.  
  231.     /* ------------------ подготовка загрузки картинок  //console.log(stopor.length); --------------------------------------------------------------*/
  232.  
  233.  
  234.  
  235.  
  236.     // функция округления байтов
  237.     function kilob(val)
  238.     {
  239.         if (val<=1024)                  return(number_format(val,0, '.', ' ')+' б');
  240.         if (val>=1023 && val<1048576)   return(number_format(val/1024,0, '.', ' ')+' Кб');
  241.         if (val>=1048576)               return(number_format(val/1048576,1, '.', ' ')+' Мб');
  242.     }
  243.  
  244.  
  245.     // функция  number_format алаогичная php функции
  246.     function number_format( number, decimals, dec_point, thousands_sep ) {
  247.         // использование number_format(1234.5678, 2, '.', '');
  248.         var i, j, kw, kd, km;
  249.         if( isNaN(decimals = Math.abs(decimals)) ){
  250.             decimals = 2;
  251.         }
  252.         if( dec_point == undefined )
  253.         {
  254.             dec_point = ",";
  255.         }
  256.         if( thousands_sep == undefined )
  257.         {
  258.             thousands_sep = ".";
  259.         }
  260.  
  261.         i = parseInt(number = (+number || 0).toFixed(decimals)) + "";
  262.  
  263.         if( (j = i.length) > 3 ){
  264.             j = j % 3;
  265.         } else{
  266.             j = 0;
  267.         }
  268.         km = (j ? i.substr(0, j) + thousands_sep : "");
  269.         kw = i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep);
  270.         //kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).slice(2) : "");
  271.         kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).replace(/-/, 0).slice(2) : "");
  272.         return km + kw + kd;
  273.     }
  274.  
  275.  
  276.  
  277.     /* ------------------ подготовка загрузки картинок  //console.log(stopor.length); --------------------------------------------------------------*/
  278.  
  279. /// определение jQuery - конес
  280. });

 

Powered by ExBB FM 1.0 RC1