Ergebnis 1 bis 6 von 6

Thema: IMG Upload

  1. #1
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    IMG Upload

    Hallo Leute,

    ich nutze folgendes Script zum IMG-Upload, bzw will es nutzen

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Cropper.js</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
      <link rel="stylesheet" href="../css/cropper.css">
      <style>
        .label {
          cursor: pointer;
        }
        .progress {
          display: none;
          margin-bottom: 1rem;
        }
        .alert {
          display: none;
        }
        .img-container img {
          max-width: 100%;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <h1>Upload cropped image to server</h1>
        <label class="label" data-toggle="tooltip" title="Change your avatar">
          <img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar">
          <input type="file" class="sr-only" id="input" name="image" accept="image/*">
        </label>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
        <div class="alert" role="alert"></div>
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Crop the image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="img-container">
                  <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="crop">Crop</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
      <script src="../js/cropper.js"></script>
      <script>
        window.addEventListener('DOMContentLoaded', function () {
          var avatar = document.getElementById('avatar');
          var image = document.getElementById('image');
          var input = document.getElementById('input');
          var $progress = $('.progress');
          var $progressBar = $('.progress-bar');
          var $alert = $('.alert');
          var $modal = $('#modal');
          var cropper;
          $('[data-toggle="tooltip"]').tooltip();
          input.addEventListener('change', function (e) {
            var files = e.target.files;
            var done = function (url) {
              input.value = '';
              image.src = url;
              $alert.hide();
              $modal.modal('show');
            };
            var reader;
            var file;
            var url;
            if (files && files.length > 0) {
              file = files[0];
              if (URL) {
                done(URL.createObjectURL(file));
              } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                  done(reader.result);
                };
                reader.readAsDataURL(file);
              }
            }
          });
          $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
              aspectRatio: 1,
              viewMode: 3,
            });
          }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
          });
          document.getElementById('crop').addEventListener('click', function () {
            var initialAvatarURL;
            var canvas;
            $modal.modal('hide');
            if (cropper) {
              canvas = cropper.getCroppedCanvas({
                width: 160,
                height: 160,
              });
              initialAvatarURL = avatar.src;
              avatar.src = canvas.toDataURL();
              $progress.show();
              $alert.removeClass('alert-success alert-warning');
              canvas.toBlob(function (blob) {
                var formData = new FormData();
                formData.append('avatar', blob, 'avatar.jpg');
                $.ajax('pfad_zur_datei_zwecks_php_upload', {
                  method: 'POST',
                  data: formData,
                  processData: false,
                  contentType: false,
                  xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.upload.onprogress = function (e) {
                      var percent = '0';
                      var percentage = '0%';
                      if (e.lengthComputable) {
                        percent = Math.round((e.loaded / e.total) * 100);
                        percentage = percent + '%';
                        $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                      }
                    };
                    return xhr;
                  },
                  success: function () {
                    $alert.show().addClass('alert-success').text('Upload success');
                  },
                  error: function () {
                    avatar.src = initialAvatarURL;
                    $alert.show().addClass('alert-warning').text('Upload error');
                  },
                  complete: function () {
                    $progress.hide();
                  },
                });
              });
            }
          });
        });
      </script>
    </body>
    </html>
    Das Problem ist nun eigentlich nur folgendes:
    welches ist meine Datei, bzw wie kann ich Sie in PHP abfangen?

    Danke im Voraus

    LG

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.712

    AW: IMG Upload

    Das Image sollte sich in
    PHP-Code:
    $_FILES["avatar"
    befinden soweit ich das man verstehe.

    Steht hier im stack auch so.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: IMG Upload

    Da gebe ich dir Recht, nur in Php:

    Code:
    if (move_uploaded_file($_FILES['avatar']['name'], "[absoluter-pfad]/images/profile_img")) {
        echo "Datei ist valide und wurde erfolgreich hochgeladen.\n";
    } else {
    			
        echo "Fehler";
    }
    bekomme ich Immer Fehler, und es erfolgt kein Upload.

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.712

    AW: IMG Upload

    Hast du jetzt auch exakt die Syntax von https://stackoverflow.com/a/20375671 verwendet? Auch im JS? Du müsstest den Code mal runter reduzieren auf das Notwendige bis es funktioniert. Und bitte im Serverscript N I E M A L S ungeprüft CGI-Variablenwerte übernehmen!
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: IMG Upload

    Ich bin jetzt grad echt in ner Sackgasse irgendwie, weil ich nicht weiß was ich tun soll ^^

    ich habe das Script, dass ja angeblich so funktionieren soll übernommen, und es hat ja nicht funktioniert. Was soll ich nun aber reduzieren?
    Ich bin kein Jquery Experte deshalb verzeiht die extra fragen :/

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.712

    AW: IMG Upload

    Tut mir leid, ich kann mit PHP nicht dienen. Ich würde als erstes für eine aussagekräftige Fehlermeldung sorgen. Das hier würde ich lesen und ausprobieren: https://www.php.net/manual/de/langua...rorcontrol.php
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Ähnliche Themen

  1. File Upload Upload iOS
    Von TecEye im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 13-07-2016, 10:09
  2. [FRAGE] Upload ohne upload-Button mit bildanzeige
    Von centauros im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 16-02-2014, 18:13
  3. Antworten: 2
    Letzter Beitrag: 24-10-2009, 19:20
  4. [PHP-Upload] Dateiname beim Upload ändern
    Von sheepy im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 02-06-2006, 15:43
  5. php Upload
    Von Pad im Forum Serverseitige Programmierung
    Antworten: 1
    Letzter Beitrag: 10-04-2003, 11:38

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •