PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
shahin
Отправлено: 09 Февраля, 2017 - 21:31:27
Post Id


Гость


Покинул форум
Сообщений всего: 83
Дата рег-ции: Март 2014  


Помог: 0 раз(а)




Здравствуйте, скачал скрипт массовой загрузки файлов с предпросмотром. С помощью скрипта выбирау картинки но при отправки на скрипт обработчик на php, загружается толкование одна картинка, а не столько сколько выбрано.
вот jquery скрипт
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.  
  3. (function($) {
  4.   defaults = {
  5.     formDataKey: "files",
  6.     buttonText: "Add Files",
  7.     buttonClass: "file-preview-button",
  8.     shadowClass: "file-preview-shadow",
  9.     tableCss: "file-preview-table",
  10.     tableRowClass: "file-preview-row",
  11.     placeholderClass: "file-preview-placeholder",
  12.     loadingCss: "file-preview-loading",
  13.     tableTemplate: function() {
  14.       return "<table class='table table-striped file-preview-table' id='file-preview-table'>" +
  15.                "<tbody></tbody>" +
  16.              "</table>";
  17.     },
  18.     rowTemplate: function(options) {
  19.       return "<tr class='" + config.tableRowClass + "'>" +
  20.                "<td>" + "<img src='" + options.src + "' class='" + options.placeholderCssClass + "' />" + "</td>" +
  21.                "<td class='filename'>" + options.name + "</td>" +
  22.                "<td class='filesize'>" + options.size + "</td>" +
  23.                "<td class='remove-file'><button class='btn btn-danger'>&times;</button></td>" +
  24.              "</tr>";
  25.     },
  26.     loadingTemplate: function() {
  27.       return "<div id='file-preview-loading-container'>" +
  28.                "<div id='"+config.loadingCss+"' class='loader-inner ball-clip-rotate-pulse no-show'>" +
  29.                  "<div></div>" +
  30.                  "<div></div>" +
  31.                "</div>" +
  32.              "</div>";
  33.     }
  34.   }
  35.  
  36.   //NOTE: Depends on Humanize-plus (humanize.js)
  37.   if(typeof Humanize == 'undefined' || typeof Humanize.filesize != 'function'){
  38.     $.getScript("https://cdnjs.cloudflare.com/ajax/libs/humanize-plus/1.5.0/humanize.min.js")
  39.   }
  40.  
  41.   var getFileSize = function(filesize) {
  42.     return Humanize.fileSize(filesize);
  43.   };
  44.  
  45.   // NOTE: Ensure a required filetype is matching a MIME type
  46.   // (partial match is fine) and not matching against file extensions.
  47.   //
  48.   // Quick ref:  http://www.sitepoint.com/web-foundations/mime-types-complete-list/
  49.   //
  50.   // NOTE: For extended support of mime types, we should use https://github.com/broofa/node-mime
  51.   var getFileTypeCssClass = function(filetype) {
  52.     var fileTypeCssClass;
  53.     fileTypeCssClass = (function() {
  54.       switch (true) {
  55.         case /video/.test(filetype):
  56.           return 'video';
  57.         case /audio/.test(filetype):
  58.           return 'audio';
  59.         case /pdf/.test(filetype):
  60.           return 'pdf';
  61.         case /csv|excel/.test(filetype):
  62.           return 'spreadsheet';
  63.         case /powerpoint/.test(filetype):
  64.           return 'powerpoint';
  65.         case /msword|text/.test(filetype):
  66.           return 'document';
  67.         case /zip/.test(filetype):
  68.           return 'zip';
  69.         case /rar/.test(filetype):
  70.           return 'rar';
  71.         default:
  72.           return 'default-filetype';
  73.       }
  74.     })();
  75.     return defaults.placeholderClass + " " + fileTypeCssClass;
  76.   };
  77.  
  78.   $.fn.uploadPreviewer = function(options, callback) {
  79.     var that = this;
  80.  
  81.     if (!options) {
  82.       options = {};
  83.     }
  84.     config = $.extend({}, defaults, options);
  85.     var buttonText,
  86.         previewRowTemplate,
  87.         previewTable,
  88.         previewTableBody,
  89.         previewTableIdentifier,
  90.         currentFileList = [];
  91.  
  92.     if (window.File && window.FileReader && window.FileList && window.Blob) {
  93.  
  94.       this.wrap("<span class='btn btn-primary " + config.shadowClass + "'></span>");
  95.       buttonText = this.parent("." + config.shadowClass);
  96.       buttonText.prepend("<span>" + config.buttonText + "</span>");
  97.       buttonText.wrap("<span class='" + config.buttonClass + "'></span>");
  98.  
  99.       previewTableIdentifier = options.preview_table;
  100.       if (!previewTableIdentifier) {
  101.         $("span." + config.buttonClass).after(config.tableTemplate());
  102.         previewTableIdentifier = "table." + config.tableCss;
  103.       }
  104.  
  105.       previewTable = $(previewTableIdentifier);
  106.       previewTable.addClass(config.tableCss);
  107.       previewTableBody = previewTable.find("tbody");
  108.  
  109.       previewRowTemplate = options.preview_row_template || config.rowTemplate;
  110.  
  111.       previewTable.after(config.loadingTemplate());
  112.  
  113.       previewTable.on("click", ".remove-file", function() {
  114.         var parentRow = $(this).parent("tr");
  115.         var filename = parentRow.find(".filename").text();
  116.         for (var i = 0; i < currentFileList.length; i++) {
  117.           if (currentFileList[i].name == filename) {
  118.             currentFileList.splice(i, 1);
  119.             break;
  120.           }
  121.         }
  122.         parentRow.remove();
  123.         $.event.trigger({ type: 'file-preview:changed', files: currentFileList });
  124.       });
  125.  
  126.       this.on('change', function(e) {
  127.         var loadingSpinner = $("#" + config.loadingCss);
  128.         loadingSpinner.show();
  129.  
  130.         var reader;
  131.         var filesCount = e.currentTarget.files.length;
  132.         $.each(e.currentTarget.files, function(index, file) {
  133.           currentFileList.push(file);
  134.  
  135.           reader = new FileReader();
  136.           reader.onload = function(fileReaderEvent) {
  137.             var filesize, filetype, imagePreviewRow, placeholderCssClass, source;
  138.             if (previewTableBody) {
  139.               filetype = file.type;
  140.               if (/image/.test(filetype)) {
  141.                 source = fileReaderEvent.target.result;
  142.                 placeholderCssClass = config.placeholderClass + " image";
  143.               } else {
  144.                 source = "";
  145.                 placeholderCssClass = getFileTypeCssClass(filetype);
  146.               }
  147.               filesize = getFileSize(file.size);
  148.               imagePreviewRow = previewRowTemplate({
  149.                 src: source,
  150.                 name: file.name,
  151.                 placeholderCssClass: placeholderCssClass,
  152.                 size: filesize
  153.               });
  154.  
  155.               previewTableBody.append(imagePreviewRow);
  156.  
  157.               if (index == filesCount - 1) {
  158.                 loadingSpinner.hide();
  159.               }
  160.             }
  161.             if (callback) {
  162.               callback(fileReaderEvent);
  163.             }
  164.           };
  165.           reader.readAsDataURL(file);
  166.         });
  167.  
  168.         $.event.trigger({ type: 'file-preview:changed', files: currentFileList });
  169.       });
  170.  
  171.       this.fileList = function() {
  172.         return currentFileList;
  173.       }
  174.  
  175.       this.clearFileList = function() {
  176.         $('.remove-file').click();
  177.       }
  178.  
  179.       this.url = function(url) {
  180.         if (url != undefined) {
  181.           config.url = url;
  182.         } else {
  183.           return config.url;
  184.         }
  185.       }
  186.  
  187.       this._onComplete = function(eventData) {
  188.         eventData['type'] = 'file-preview:submit:complete'
  189.         $.event.trigger(eventData);
  190.       }
  191.  
  192.       this.submit = function(successCallback, errorCallback) {
  193.         if (config.url == undefined) throw('Please set the URL to which I shall post the files');
  194.  
  195.         if (currentFileList.length > 0) {
  196.           var filesFormData = new FormData();
  197.           currentFileList.forEach(function(file) {
  198.             filesFormData.append(options.formDataKey + "[]", file);
  199.           });
  200.  
  201.           $.ajax({
  202.             type: "POST",
  203.             url: config.url,
  204.             data: filesFormData,
  205.             contentType: false,
  206.             processData: false,
  207.             xhr: function() {
  208.               var xhr = new window.XMLHttpRequest();
  209.               xhr.upload.addEventListener("progress", function(evt) {
  210.                 if (evt.lengthComputable &&
  211.                     options != null &&
  212.                     options.uploadProgress != null
  213.                     && typeof options.uploadProgress == "function") {
  214.                   options.uploadProgress(evt.loaded / evt.total);
  215.                 }
  216.               }, false);
  217.               return xhr;
  218.             },
  219.             success: function(data, status, jqXHR) {
  220.               if (typeof successCallback == "function") {
  221.                 successCallback(data, status, jqXHR);
  222.               }
  223.               that._onComplete({ data: data, status: status, jqXHR: jqXHR });
  224.             },
  225.             error: function(jqXHR, status, error) {
  226.               if (typeof errorCallback == "function") {
  227.                 errorCallback(jqXHR, status, error);
  228.               }
  229.               that._onComplete({ error: error, status: status, jqXHR: jqXHR });
  230.             }
  231.           });
  232.         } else {
  233.           console.log("There are no selected files, please select at least one file before submitting.");
  234.           that._onComplete({ status: 'no-files' });
  235.         }
  236.       }
  237.  
  238.       return this;
  239.  
  240.     } else {
  241.       throw "The File APIs are not fully supported in this browser.";
  242.     }
  243.   };
  244. })(jQuery);
  245.  
  246.  

Вот форма ввода
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <?php
  3.     if(isset($_POST["SEND"])){
  4.           print_r($_FILES["LOAD"]);
  5.         }
  6. ?>
  7. <!DOCTYPE html>
  8. <html lang="en">
  9.   <head>
  10.     <title>File Upload Previewer</title>
  11.     <meta charset="utf-8" />
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  13.     <link href="vendor/bootstrap.min.css" rel="stylesheet" />
  14.     <link href="vendor/loaders.min.css" rel="stylesheet" />
  15.     <link href="css/jquery.uploadPreviewer.css" rel="stylesheet" />
  16.   </head>
  17.  
  18.   <body>
  19.     <div class="container">
  20.       <div class="row">
  21.         <h1>File Upload Previewer Demo</h1>
  22.         <p>Click 'Add Files' and choose your files. You will then be able to preview your files!</p>
  23.       </div>
  24.       <div class="row">
  25.         <div id="file-uploader">
  26.           <form method="post" enctype="multipart/form-data" />
  27.             <input type="file" accept="image/*" name="images[]" multiple="multiple" />
  28.             <input type="submit" name="SEND" value="Загрузить" />
  29.           </form>
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </body>
  34. </html>
  35.  
  36. <script src="vendor/jquery.min.js"></script>
  37. <script src="jquery.uploadPreviewer.js"></script>
  38.  
  39. <script type="text/javascript">
  40.   $(document).ready(function() {
  41.     myUploadInput = $("input[type=file]").uploadPreviewer();
  42.  
  43.   });
  44. </script>
  45.  
  46.  
  47.  

и вот php
PHP:
скопировать код в буфер обмена
  1.  
  2.  
  3. <?PHP
  4. //ширина и высота в пикселях
  5. $pic_weight = 300000;
  6. $pic_height = 300000;
  7. if (isset($_FILES))
  8. {
  9.   # Массив для имён изображений
  10.  $names = array();
  11.   //пролистываем весь массив изображений по одному $_FILES
  12.   foreach ($_FILES['images']['name'] as $k=>$v)
  13.   {
  14.     //директория загрузки
  15.     $uploaddir = "img_elan/";
  16.     //новое имя изображения
  17.     $apend=rand(10,100).rand(100,1000).'.png';
  18.     //путь к новому изображению
  19.     $names[] = $apend;
  20.     $uploadfile = $uploaddir . $apend;
  21.     //Проверка расширений загружаемых изображений
  22.     if($_FILES['images']['type'][$k] == "image/gif" || $_FILES['images']['type'][$k] == "image/png" ||
  23.     $_FILES['images']['type'][$k] == "image/jpg" || $_FILES['images']['type'][$k] == "image/jpeg")
  24.     {
  25.       //черный список типов файлов
  26.       $blacklist = array(".php", ".phtml", ".php3", ".php4");
  27.       foreach ($blacklist as $item)
  28.       {
  29.         if(preg_match("/$item\$/i", $_FILES['images']['name'][$k]))
  30.         {
  31.           echo "Нельзя загружать скрипты.";
  32.           exit;
  33.         }
  34.       }
  35.  
  36.       //перемещаем файл из временного хранилища
  37.       if (move_uploaded_file($_FILES['images']['tmp_name'][$k], $uploadfile))
  38.       {
  39.         //получаем размеры файла
  40.         $size = getimagesize($uploadfile);
  41.         //проверяем размеры файла, если они нам подходят, то оставляем файл
  42.         if ($size[0] < $pic_weight && $size[1] < $pic_height){
  43.             echo "";
  44. }
  45.         else
  46.         {
  47.           echo "<center><br>Размер пикселей превышает допустимые нормы.</center>";
  48.           unlink($uploadfile);
  49.         }
  50.       }
  51.       else
  52.         echo "<center><br>Файл не загружен, вернитесь и попробуйте еще раз.</center>";
  53.     }
  54.     else
  55.       echo "<center><br>Можно загружать только изображения в форматах jpg, jpeg, gif и png.</center>";
  56.   }
  57.  
  58.       $img_str = implode(',', $names);
  59.       echo $img_str;
  60.  
  61.                 connectDB();
  62.                 $mysqli->query("INSERT INTO `elan`   (`img`) VALUES ('" . $img_str . "')");
  63.                 closeDB();
  64.          
  65.  
  66.     }
  67.  
  68.  
 
 Top
shahin
Отправлено: 10 Февраля, 2017 - 21:52:05
Post Id


Гость


Покинул форум
Сообщений всего: 83
Дата рег-ции: Март 2014  


Помог: 0 раз(а)




Видимо вопрос не так сформулировал. Не подскажете где в jquery хранятся выбранные картинки в каком массиве я в javascript ноль. Как мне в $_FILES с помощью скрипта передать данные
 
 Top
LIME
Отправлено: 10 Февраля, 2017 - 22:13:51
Post Id



Активный участник


Покинул форум
Сообщений всего: 9785
Дата рег-ции: Нояб. 2010  


Помог: 287 раз(а)




shahin пишет:
Видимо вопрос не так сформулировал.
это мягко сказано
В клиентском js ничего не хранится
Почти
Ибо это уязвимость
Если бы ты мог файлами управлять? А файл паролей? Вооот...
Есть готовые плагины для жуйквери... больше ничего не посоветую ибо не работаю с этим гавном уже более двух лет и все забыл
И тебе советую не учить
Варианты сейчас ангулар и реакт
Фронтовикам реакт больше нравится потому что они обычно ламеры
Както так
 
 Top
shahin
Отправлено: 10 Февраля, 2017 - 22:57:39
Post Id


Гость


Покинул форум
Сообщений всего: 83
Дата рег-ции: Март 2014  


Помог: 0 раз(а)




LIME пишет:
shahin пишет:
Видимо вопрос не так сформулировал.
это мягко сказано
В клиентском js ничего не хранится
Почти
Ибо это уязвимость
Если бы ты мог файлами управлять? А файл паролей? Вооот...
Есть готовые плагины для жуйквери... больше ничего не посоветую ибо не работаю с этим гавном уже более двух лет и все забыл
И тебе советую не учить
Варианты сейчас ангулар и реакт
Фронтовикам реакт больше нравится потому что они обычно ламеры
Както так


Уже сколько времени хочу на сайт поставить добавление картинок как на avito ru но не могу найти. Вот нашёл скрипт который описал выше, с его помощью можно выбирать несколько файлов с предпросмотром и удалять но передать в форму не могу только один файл передаётся
 
 Top
LIME
Отправлено: 10 Февраля, 2017 - 23:10:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 9785
Дата рег-ции: Нояб. 2010  


Помог: 287 раз(а)




Омг
Значит иди дворником работать
Это не со злости а чтоб мотивировать
Не смог ? Мети улицы
Значит пробуй другой плагин
Много кода
Никто не будет ковырять
Умеют многие...никто не будет
(Добавление)
Кто обещал что будет легко?
Пробуй другой плагин
Их куча есть
Я помню когда первый раз не понимал как код работает купил в ближайшей аптеке цитрамон
Потому что голова разболелась
Это правдаУлыбка
Пробуй другие че ты как дурак
 
 Top
shahin
Отправлено: 11 Февраля, 2017 - 00:03:27
Post Id


Гость


Покинул форум
Сообщений всего: 83
Дата рег-ции: Март 2014  


Помог: 0 раз(а)




LIME пишет:
Чего сразу оскорбление? Почему дурак

Думаете я сразу на форум побежал? Я перегуглил и перепробовал все что нашёл большинство скриптов работают с multiple, андроид и Иос и ещё некоторые браузеры его не поддерживают. хотябы ссылкой на рабочий скрипт помогли
 
 Top
LIME
Отправлено: 11 Февраля, 2017 - 00:07:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 9785
Дата рег-ции: Нояб. 2010  


Помог: 287 раз(а)




Ну я не хотел оскорбить
Значит ждите ответа
Я не фронт
Всего Вам наилучшего
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB