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

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

1. shahin - 09 Февраля, 2017 - 21:31:27 - перейти к сообщению
Здравствуйте, скачал скрипт массовой загрузки файлов с предпросмотром. С помощью скрипта выбирау картинки но при отправки на скрипт обработчик на 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.  
2. shahin - 10 Февраля, 2017 - 21:52:05 - перейти к сообщению
Видимо вопрос не так сформулировал. Не подскажете где в jquery хранятся выбранные картинки в каком массиве я в javascript ноль. Как мне в $_FILES с помощью скрипта передать данные
3. LIME - 10 Февраля, 2017 - 22:13:51 - перейти к сообщению
shahin пишет:
Видимо вопрос не так сформулировал.
это мягко сказано
В клиентском js ничего не хранится
Почти
Ибо это уязвимость
Если бы ты мог файлами управлять? А файл паролей? Вооот...
Есть готовые плагины для жуйквери... больше ничего не посоветую ибо не работаю с этим гавном уже более двух лет и все забыл
И тебе советую не учить
Варианты сейчас ангулар и реакт
Фронтовикам реакт больше нравится потому что они обычно ламеры
Както так
4. shahin - 10 Февраля, 2017 - 22:57:39 - перейти к сообщению
LIME пишет:
shahin пишет:
Видимо вопрос не так сформулировал.
это мягко сказано
В клиентском js ничего не хранится
Почти
Ибо это уязвимость
Если бы ты мог файлами управлять? А файл паролей? Вооот...
Есть готовые плагины для жуйквери... больше ничего не посоветую ибо не работаю с этим гавном уже более двух лет и все забыл
И тебе советую не учить
Варианты сейчас ангулар и реакт
Фронтовикам реакт больше нравится потому что они обычно ламеры
Както так


Уже сколько времени хочу на сайт поставить добавление картинок как на avito ru но не могу найти. Вот нашёл скрипт который описал выше, с его помощью можно выбирать несколько файлов с предпросмотром и удалять но передать в форму не могу только один файл передаётся
5. LIME - 10 Февраля, 2017 - 23:10:41 - перейти к сообщению
Омг
Значит иди дворником работать
Это не со злости а чтоб мотивировать
Не смог ? Мети улицы
Значит пробуй другой плагин
Много кода
Никто не будет ковырять
Умеют многие...никто не будет
(Добавление)
Кто обещал что будет легко?
Пробуй другой плагин
Их куча есть
Я помню когда первый раз не понимал как код работает купил в ближайшей аптеке цитрамон
Потому что голова разболелась
Это правдаУлыбка
Пробуй другие че ты как дурак
6. shahin - 11 Февраля, 2017 - 00:03:27 - перейти к сообщению
LIME пишет:
Чего сразу оскорбление? Почему дурак

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

 

Powered by ExBB FM 1.0 RC1