Форумы портала PHP.SU :: Версия для печати

1. shahin - 09 Февраля, 2017 - 21:31:27 - перейти к сообщению

Здравствуйте, скачал скрипт массовой загрузки файлов с предпросмотром. С помощью скрипта выбирау картинки но при отправки на скрипт обработчик на php, загружается толкование одна картинка, а не столько сколько выбрано.
вот jquery скрипт

CODE (javascript):
скопировать код в буфер обмена

 
 
(function($) {
  defaults = {
    formDataKey: "files",
    buttonText: "Add Files",
    buttonClass: "file-preview-button",
    shadowClass: "file-preview-shadow",
    tableCss: "file-preview-table",
    tableRowClass: "file-preview-row",
    placeholderClass: "file-preview-placeholder",
    loadingCss: "file-preview-loading",
    tableTemplate: function() {
      return "<table class='table table-striped file-preview-table' id='file-preview-table'>" +
               "<tbody></tbody>" +
             "</table>";
    },
    rowTemplate: function(options) {
      return "<tr class='" + config.tableRowClass + "'>" +
               "<td>" + "<img src='" + options.src + "' class='" + options.placeholderCssClass + "' />" + "</td>" +
               "<td class='filename'>" + options.name + "</td>" +
               "<td class='filesize'>" + options.size + "</td>" +
               "<td class='remove-file'><button class='btn btn-danger'>&times;</button></td>" +
             "</tr>";
    },
    loadingTemplate: function() {
      return "<div id='file-preview-loading-container'>" +
               "<div id='"+config.loadingCss+"' class='loader-inner ball-clip-rotate-pulse no-show'>" +
                 "<div></div>" +
                 "<div></div>" +
               "</div>" +
             "</div>";
    }
  }
 
  //NOTE: Depends on Humanize-plus (humanize.js)
  if(typeof Humanize == 'undefined' || typeof Humanize.filesize != 'function'){
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/humanize-plus/1.5.0/humanize.min.js")
  }
 
  var getFileSize = function(filesize) {
    return Humanize.fileSize(filesize);
  };
 
  // NOTE: Ensure a required filetype is matching a MIME type
  // (partial match is fine) and not matching against file extensions.
  //
  // Quick ref:  http://www.sitepoint.com/web-foundations/mime-types-complete-list/
  //
  // NOTE: For extended support of mime types, we should use https://github.com/broofa/node-mime
  var getFileTypeCssClass = function(filetype) {
    var fileTypeCssClass;
    fileTypeCssClass = (function() {
      switch (true) {
        case /video/.test(filetype):
          return 'video';
        case /audio/.test(filetype):
          return 'audio';
        case /pdf/.test(filetype):
          return 'pdf';
        case /csv|excel/.test(filetype):
          return 'spreadsheet';
        case /powerpoint/.test(filetype):
          return 'powerpoint';
        case /msword|text/.test(filetype):
          return 'document';
        case /zip/.test(filetype):
          return 'zip';
        case /rar/.test(filetype):
          return 'rar';
        default:
          return 'default-filetype';
      }
    })();
    return defaults.placeholderClass + " " + fileTypeCssClass;
  };
 
  $.fn.uploadPreviewer = function(options, callback) {
    var that = this;
 
    if (!options) {
      options = {};
    }
    config = $.extend({}, defaults, options);
    var buttonText,
        previewRowTemplate,
        previewTable,
        previewTableBody,
        previewTableIdentifier,
        currentFileList = [];
 
    if (window.File && window.FileReader && window.FileList && window.Blob) {
 
      this.wrap("<span class='btn btn-primary " + config.shadowClass + "'></span>");
      buttonText = this.parent("." + config.shadowClass);
      buttonText.prepend("<span>" + config.buttonText + "</span>");
      buttonText.wrap("<span class='" + config.buttonClass + "'></span>");
 
      previewTableIdentifier = options.preview_table;
      if (!previewTableIdentifier) {
        $("span." + config.buttonClass).after(config.tableTemplate());
        previewTableIdentifier = "table." + config.tableCss;
      }
 
      previewTable = $(previewTableIdentifier);
      previewTable.addClass(config.tableCss);
      previewTableBody = previewTable.find("tbody");
 
      previewRowTemplate = options.preview_row_template || config.rowTemplate;
 
      previewTable.after(config.loadingTemplate());
 
      previewTable.on("click", ".remove-file", function() {
        var parentRow = $(this).parent("tr");
        var filename = parentRow.find(".filename").text();
        for (var i = 0; i < currentFileList.length; i++) {
          if (currentFileList[i].name == filename) {
            currentFileList.splice(i, 1);
            break;
          }
        }
        parentRow.remove();
        $.event.trigger({ type: 'file-preview:changed', files: currentFileList });
      });
 
      this.on('change', function(e) {
        var loadingSpinner = $("#" + config.loadingCss);
        loadingSpinner.show();
 
        var reader;
        var filesCount = e.currentTarget.files.length;
        $.each(e.currentTarget.files, function(index, file) {
          currentFileList.push(file);
 
          reader = new FileReader();
          reader.onload = function(fileReaderEvent) {
            var filesize, filetype, imagePreviewRow, placeholderCssClass, source;
            if (previewTableBody) {
              filetype = file.type;
              if (/image/.test(filetype)) {
                source = fileReaderEvent.target.result;
                placeholderCssClass = config.placeholderClass + " image";
              } else {
                source = "";
                placeholderCssClass = getFileTypeCssClass(filetype);
              }
              filesize = getFileSize(file.size);
              imagePreviewRow = previewRowTemplate({
                src: source,
                name: file.name,
                placeholderCssClass: placeholderCssClass,
                size: filesize
              });
 
              previewTableBody.append(imagePreviewRow);
 
              if (index == filesCount - 1) {
                loadingSpinner.hide();
              }
            }
            if (callback) {
              callback(fileReaderEvent);
            }
          };
          reader.readAsDataURL(file);
        });
 
        $.event.trigger({ type: 'file-preview:changed', files: currentFileList });
      });
 
      this.fileList = function() {
        return currentFileList;
      }
 
      this.clearFileList = function() {
        $('.remove-file').click();
      }
 
      this.url = function(url) {
        if (url != undefined) {
          config.url = url;
        } else {
          return config.url;
        }
      }
 
      this._onComplete = function(eventData) {
        eventData['type'] = 'file-preview:submit:complete'
        $.event.trigger(eventData);
      }
 
      this.submit = function(successCallback, errorCallback) {
        if (config.url == undefined) throw('Please set the URL to which I shall post the files');
 
        if (currentFileList.length > 0) {
          var filesFormData = new FormData();
          currentFileList.forEach(function(file) {
            filesFormData.append(options.formDataKey + "[]", file);
          });
 
          $.ajax({
            type: "POST",
            url: config.url,
            data: filesFormData,
            contentType: false,
            processData: false,
            xhr: function() {
              var xhr = new window.XMLHttpRequest();
              xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable &&
                    options != null &&
                    options.uploadProgress != null
                    && typeof options.uploadProgress == "function") {
                  options.uploadProgress(evt.loaded / evt.total);
                }
              }, false);
              return xhr;
            },
            success: function(data, status, jqXHR) {
              if (typeof successCallback == "function") {
                successCallback(data, status, jqXHR);
              }
              that._onComplete({ data: data, status: status, jqXHR: jqXHR });
            },
            error: function(jqXHR, status, error) {
              if (typeof errorCallback == "function") {
                errorCallback(jqXHR, status, error);
              }
              that._onComplete({ error: error, status: status, jqXHR: jqXHR });
            }
          });
        } else {
          console.log("There are no selected files, please select at least one file before submitting.");
          that._onComplete({ status: 'no-files' });
        }
      }
 
      return this;
 
    } else {
      throw "The File APIs are not fully supported in this browser.";
    }
  };
})(jQuery);
 
 

Вот форма ввода

CODE (html):
скопировать код в буфер обмена

 
<?php
     if(isset($_POST["SEND"])){
          print_r($_FILES["LOAD"]);
        }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>File Upload Previewer</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="vendor/bootstrap.min.css" rel="stylesheet" />
    <link href="vendor/loaders.min.css" rel="stylesheet" />
    <link href="css/jquery.uploadPreviewer.css" rel="stylesheet" />
  </head>
 
  <body>
    <div class="container">
      <div class="row">
        <h1>File Upload Previewer Demo</h1>
        <p>Click 'Add Files' and choose your files. You will then be able to preview your files!</p>
      </div>
      <div class="row">
        <div id="file-uploader">
          <form method="post" enctype="multipart/form-data" />
            <input type="file" accept="image/*" name="images[]" multiple="multiple" />
            <input type="submit" name="SEND" value="Загрузить" />
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
 
<script src="vendor/jquery.min.js"></script>
<script src="jquery.uploadPreviewer.js"></script>
 
<script type="text/javascript">
  $(document).ready(function() {
    myUploadInput = $("input[type=file]").uploadPreviewer();
 
  });
</script>
 
 
 

и вот php

PHP:
скопировать код в буфер обмена

 
 
<?PHP 
//ширина и высота в пикселях
$pic_weight = 300000;
$pic_height = 300000;
if (isset($_FILES))
{
  # Массив для имён изображений
  $names = array();
  //пролистываем весь массив изображений по одному $_FILES
  foreach ($_FILES['images']['name'] as $k=>$v)
  {
    //директория загрузки
    $uploaddir = "img_elan/";
    //новое имя изображения
    $apend=rand(10,100).rand(100,1000).'.png';
    //путь к новому изображению
    $names[] = $apend;
    $uploadfile = $uploaddir . $apend;
    //Проверка расширений загружаемых изображений
    if($_FILES['images']['type'][$k] == "image/gif" || $_FILES['images']['type'][$k] == "image/png" ||
    $_FILES['images']['type'][$k] == "image/jpg" || $_FILES['images']['type'][$k] == "image/jpeg")
    {
      //черный список типов файлов
      $blacklist = array(".php", ".phtml", ".php3", ".php4");
      foreach ($blacklist as $item)
      {
        if(preg_match("/$item\$/i", $_FILES['images']['name'][$k]))
        {
          echo "Нельзя загружать скрипты.";
          exit;
        }
      }
 
      //перемещаем файл из временного хранилища
      if (move_uploaded_file($_FILES['images']['tmp_name'][$k], $uploadfile))
      {
        //получаем размеры файла
        $size = getimagesize($uploadfile);
        //проверяем размеры файла, если они нам подходят, то оставляем файл
        if ($size[0] < $pic_weight && $size[1] < $pic_height){
            echo "";
}
        else
        {
          echo "<center><br>Размер пикселей превышает допустимые нормы.</center>";
          unlink($uploadfile);
        }
      }
      else
        echo "<center><br>Файл не загружен, вернитесь и попробуйте еще раз.</center>";
    }
    else
      echo "<center><br>Можно загружать только изображения в форматах jpg, jpeg, gif и png.</center>";
  }
  
      $img_str = implode(',', $names);
      echo $img_str;
 
                connectDB();
                $mysqli->query("INSERT INTO `elan`   (`img`) VALUES ('" . $img_str . "')");
                closeDB();
          
 
    }
 
 