Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript Probleme Formular mit Text und File zusammen senden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript Probleme Formular mit Text und File zusammen senden

    Hallo zusammen,

    ich versuche grade mit einem Formular gleichzeig die ausgefüllten Formularfelder und ein fileupload abzusenden. Das ganze wird als $.Ajax ausgeführt. soweit so schön. das File wird auch hochgeladen, aber die restlichen Formularfelder (welche ich
    mit .serilized() in eine Variable gelegt und diese an das File Objekt angehangen habe) kann ich nicht im upload.php abfragen. Als ob sie nicht hochgeladen wurden. werden sie aber wie man in der Web-Konsole von Firefox sieht. Hat vielleicht jemand eine Idee?


    HTML-Code:
    
    <head>
        <meta charset="UTF-8">
        <title>Formular</title>
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon3.ico">    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="js/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="personalSeite1" class="personalDiv personalCurrent">
    
          <div class="container" id="rahmen-mitarbeiter-anlegen">
            <div id="mitarbeiter-anlegen">
              <div id="ad-userAnlegenForm">
                <h4 class="well well-sm">
                  <div class="table">
                    <div class="tr">
                      <div class="td">
                        Mitarbeiter anlegen:
                      </div>
                    </div>
                  </div>
                </h4>
    
    
                <form id="personalEingeben" class="form-horizontal">
                  <div id="mitarbeiter-eingaben">
    
                    <div class="form-group">
    
                      <label class="control-label col-sm-2" for="anrede">Anrede:</label>
                      <div class="col-sm-4">
                        <select name="persons_title" id="mitarbeiterAnrede" class="form-control">
                          <option value="0">Anrede wählen</option>
                          <option value="1">Frau</option>
                          <option value="2">Herr</option>
                        </select>
                      </div>
                      <label class="control-label col-sm-3" for="persons_number">Personalnummer:</label>
                      <div class="col-sm-2">
                        <input type="text" class="form-control" name="persons_number">
                      </div>
                    </div>
    
                    <div class="form-group">
                      <label class="control-label col-sm-2" for="first_name">Vorname:</label>
                      <div class="col-sm-4">
                        <input type="text" class="form-control" id="first_name" name="first_name" value="">
                      </div>
    
                      <label class="control-label col-sm-3" for="second_name">zweiter Vorname:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" id="second_name" name="second_name">
                      </div>
    
                    </div>
    
                    <div class="form-group">
                      <label class="control-label col-sm-2" for="last_name">Nachname:</label>
                      <div class="col-sm-4">
                        <input type="text" class="form-control" id="last_name" name="last_name" value="">
                      </div>
                    </div>
    
                    <div class="form-group">
                      <label class="control-label col-sm-2" for="email2">Vertrag:</label>
                      <div class="col-sm-10 mitarbeiterFileRahmen">
                        <div class="input-group" id="file">
                          <div class="upload-area upload-area-leer">Datei hier ablegen</div>
                          <span class="input-group-addon" id="mitarbeiterFileClick">Datei auswählen</span>
                        </div>
                        <input type="file" id="mitarbeiterFileNone" name="fileNone">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-sm-2" for="mitarbeiterFileUploadInfo"></label>
                      <div class="col-sm-10 mitarbeiterFileUploadRahmen">
                        <div id="mitarbeiterFileUploadInfo">
                          <div id="mitarbeiterFileUploadInfoContent">
                          </div>
                        </div>
                      </div>
                    </div>
                    <button type="button" class="btn btn-default btn-send" >Mitarbeiter speichern</button>
                  </div>
                </form>
    
              </div>
    
            </div>
    
          </div>
        </div>
    
    </body>

    css Datei:

    Code:
    .inputCheckbox {
      width: 100%;
      border: 1px solid #cccccc;
      text-align: left !important;
    }
    
    .input_shadow {
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    }
    
    .input-error {
      border-color: #FF0000;
      background-color: rgba(255, 0, 0, 0.2);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
    }
    
    .upload-area {
      border: 1px solid #cccccc;
      height: 60px;
      border-radius: 4px 0 0 4px;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      padding: 20px;
    }
    
    .upload-area:hover{
      cursor: pointer;
    }
    
    .btn-anmelden {
      background-color: #87b03f;
      border-color: darkslategray;
      margin-left: -20px;
    }
    .btn-send {
      color: #333;
      background-color: #e6e6e6;
      border-color: #8c8c8c;
    }
    .btn-send:hover {
      background-color: #d4d4d4;
    }
    
    #mitarbeiterFileNone {
    display: none;
    }
    
    #mitarbeiterFileDrop {
      height: 60px;
    }
    
    #mitarbeiterEintritt {
      line-height: 1;
    }
    
    #mitarbeiterFileUploadInfo {
      height: 3px;
      width: 100%;
      border: 1px solid #cccccc;
    }
    
    #mitarbeiterFileUploadInfoContent {
      height: 100%;
      width: 0%;
      background-color: #87b03f;
    }
    JavaScript:
    Code:
    <script>
    
    
          $(document).ready(function () {
            $("body").on("mouseover", ".btn-send", function () {
    
              if ($("#mitarbeiterAnrede").val() == 0) {
                $("#mitarbeiterAnrede").addClass("input-error");
              }
              if ($("#first_name").val() == "") {
                $("#first_name").addClass("input-error");
              }
              if ($("#last_name").val() == "") {
                $("#last_name").addClass("input-error");
              }
    
              if ($(".upload-area").hasClass("upload-area-leer")) {
                $(".upload-area").addClass("input-error");
              }
    
              inputError = -1;
              $("#mitarbeiter-eingaben .input-error").each(function (index) {
                inputError = index;
              });
    
              console.info("E: " + inputError);
              if (inputError >= 0) {
                $(".btn-send").attr('disabled', true);
              } else {
                $(".btn-send").removeAttr('disabled');
              }
    
    
    
            });
    
            $("body").on("mouseleave", ".btn-send", function () {
              $("#mitarbeiterAnrede").removeClass("input-error");
              $("#first_name").removeClass("input-error");
              $("#last_name").removeClass("input-error");
              $(".upload-area").removeClass("input-error");
            });
    
    
    
            $("body").on("click", ".btn-send", function () {
              inputError - 1;
              $("#mitarbeiter-eingaben .input-error").each(function (index) {
                inputError = index;
              });
              console.info("spannung click: " + inputError);
              if (inputError >= 0) {
                console.info("Treffer click");
              } else {
    
                var formSerData = $("#personalEingeben").serialize();
                fd.append('form', formSerData);
                uploadData(fd);
              }
    
            });
    
            // preventing page from redirecting
            $("html").on("dragover", function (e) {
              e.preventDefault();
              e.stopPropagation();
              if ($("#first_name").val() == "") {
                $(".upload-area").addClass("input-error");
                $(".upload-area").text("Vor- und/oder Nachname nicht ausgefüllt");
              } else {
                $(".upload-area").removeClass("input-error");
                $(".upload-area").text("Datei hier rein ziehen");
              }
            });
    
            // Drag enter - firefox
            $('.upload-area').on('dragenter', function (e) {
              e.stopPropagation();
              e.preventDefault();
              if ($(".upload-area").hasClass("input-error")) {
    
              } else {
                $(".upload-area").text("Datei hier ablegen");
              }
            });
    
            // Drag over - IE
            $('.upload-area').on('dragover', function (e) {
              e.stopPropagation();
              e.preventDefault();
              if ($(".upload-area").hasClass("input-error")) {
    
              } else {
                $(".upload-area").text("Datei hier ablegen");
              }
    
    
            });
    
            // drop Datei ausserhalb des Divs
            $("html").on("drop", function (e) {
              e.preventDefault();
              e.stopPropagation();
              if ($(".upload-area").hasClass("input-error")) {
    
              } else {
                $(".upload-area").text("ungültiger Bereich");
              }
            });
    
            // Drop Datei im gültigen Bereich, Datei ausgewählt
            $('.upload-area').on('drop', function (e) {
              if ($(".upload-area").hasClass("input-error")) {
    
              } else {
    
                e.stopPropagation();
                e.preventDefault();
                file = e.originalEvent.dataTransfer.files;
                dateiData = dateinameErstellen(file);
                fd = new FormData();
                if (dateiData[1] == "jpg") {
    
                  dateiname = dateiData[0];
                  //fd.append("fileName", dateiname);
                  fd.append('file', file[0], dateiname);
                  htmlText = "" + dateiname;
                  $(".upload-area").html(htmlText);
                  $(".upload-area").removeClass("upload-area-leer");
                } else {
                  $(".upload-area").html("Unerlaubter Dateityp! Nur JPG erlaubt!");
                  $(".upload-area").addClass("input-error");
                }
              }
            });
    
    
            // Dateifenster aufrufen (öffnen) für Datei auswählen
            $("#mitarbeiterFileClick, .upload-area").click(function () {
              $("#mitarbeiterFileNone").click();
            });
    
            // file ausgewaehlt
            $("#file").change(function (e) {
              e.preventDefault();
              e.stopPropagation();
              var fd = new FormData();
              //var fileData = $('#file')[0].files[0];
              dateiData = dateinameErstellen(file);
              dateiname = dateiData[0];
              fd.append('file', file[0], dateiname);
              htmlText = "" + dateiname;
              $("h1").html(htmlText);
              $(".upload-area").removeClass("upload-area-leer");
            });
    
            // Sending AJAX request and upload file
            function uploadData(fileObjekt) {
    
              $.ajax({
    
                xhr: function () {
                  var xhr = new window.XMLHttpRequest();
                  xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                      var percentComplete = evt.loaded / evt.total;
                      percentComplete = parseInt(percentComplete * 100);
                      //console.log(percentComplete);
                      uploadAnzeige(percentComplete);
                      if (percentComplete === 100) {
    
                      }
                    }
                  }, false);
                  return xhr;
                },
    
                url: 'upload.php',
                type: 'post',
                data: fileObjekt,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (result) {
                  //addThumbnail(response);
                  //console.info(result);
                }
              });
            }
    
            function dateinameErstellen(file) {
    
              fileData = file[0];
              filetype = fileData.type;
              var dateitypArray = fileData.name.split(".");
              datum = new Date();
              tag = datum.getDate();
              if (tag < 10) {
                tag = "0" + tag;
              }
              monat = datum.getMonth();
              if (monat < 10) {
                monat = "0" + monat;
              }
              jahr = datum.getFullYear();
    
              dateitypArray[0] = "Arbeitsvertrag_" + $("#first_name").val() + "_" + $("#last_name").val() + "_" + tag + monat + jahr;
              dateiname = dateitypArray[0] + "." + dateitypArray[1];
              dateiData = new Array(dateiname, dateitypArray[1]);
              return dateiData;
            }
    
            function uploadAnzeige(breite) {
              $("#mitarbeiterFileUploadInfoContent").animate({width: '' + breite + '%'});
            }
    
    
          });
    
    
    
    </script>

  • #2
    Globale Variablen solltest du nicht verwenden, da kann alles (un)mögliche schiefgehen.

    Ansonsten bleibt dir nur noch den Request zu inspizieren.

    Kommentar


    • #3
      Hat sich erledigt, ich hab nur an der falschen Stelle gesucht, ... *peinlich*

      Kommentar

      Lädt...
      X