Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax sendet an PHP Datei JSON und File Daten

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Ajax sendet an PHP Datei JSON und File Daten

    Hey Leute,

    Ich habe ein Formular was mit Ajax an eine PHP Datei gesendet wird und dieses eine json Datei abspeichert.

    Jetzt möchte ich noch ein File Upload integrieren und da stocke ich.

    Jetzt habe ich gelesen das per Ajax der File Upload nicht machbar sein soll bzw. es sich nicht vermischen lassen würde.
    Wie würdet Ihr vorgehen? - Gibt es die Möglichkeit das hochgeladene Bild als base64 zu codieren und zu senden oder soll ich eine weitere php per ajax aufrufen?

    index.php:

    HTML-Code:
    <!DOCTYPE html>
<html>
   <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>
      <div class="row">
         <div class="col-md-6">
            <form class="form-horizontal">
               <fieldset>
                  <!-- Form Name -->
                  <legend>Kunde</legend>
                  <!-- Select Basic -->
                  <div class="form-group">
                     <label class="col-md-4 control-label" for="AnspracheFeld">Ansprache</label>
                     <div class="col-md-4">
                        <select id="AnspracheFeld" name="AnspracheFeld" class="form-control">
                           <option value="1">Herr</option>
                           <option value="2">Frau</option>
                        </select>
                     </div>
                  </div>
                  <!-- Text input-->
                  <div class="form-group">
                     <label class="col-md-4 control-label" for="KundeFeld">Name</label>  
                     <div class="col-md-4">
                        <div class="input-group">
                           <input id="KundeFeld" name="KundeFeld" type="text" placeholder="Meier" value="Meier" class="form-control input-md" >
                           <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                        </div>
                     </div>
                  </div>
                  <!-- Text input-->
                  <div class="form-group">
                     <label class="col-md-4 control-label" for="EmailFeld">E-Mail</label>  
                     <div class="col-md-4">
                        <div class="input-group">
                           <input id="EmailFeld" name="EmailFeld" type="text" placeholder="test@test.de" value="test@test.de" class="form-control input-md" >
                           <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></div>
                        </div>
                     </div>
                  </div>
                  <!-- File Button --> 
                  <div class="form-group">
                     <label class="col-md-4 control-label" for="filebutton">Datei anhängen</label>
                     <div class="col-md-4">
                        <input id="filebutton" name="filebutton" class="input-file" type="file">
                     </div>
                  </div>
                  <!-- Speichern/Absenden -->
                  <div class="form-group">
                     <label class="col-md-4 control-label" for="SpeichernButton">Angebot</label>
                     <div class="col-md-8">
                        <button id="SpeichernButton" name="SpeichernButton" class="btn btn-success"><span class="glyphicon glyphicon-floppy-disk"></span> Speichern</button>                            
                     </div>
                  </div>
               </fieldset>
            </form>
         </div>
      </div>
   </body>
</html>
<script>
   $("#SpeichernButton").click(function(e) {
               e.preventDefault();            
               var
               $Absender = "User",
               $AbsenderEmail = "test@test.de",
               $AnspracheFeld = ($("#AnspracheFeld option:selected").text()),
               $KundeFeld = ($("#KundeFeld").val()),
               $KundeEmail = ($("#EmailFeld").val());                


           //-----------------------------------Informationen werden in einer JSON Datei gespeichert-----------------------------                


                       $.ajax({
                       type: "POST",
                       url: "upload.php",
                       dataType: 'json',
                       data: {
                           "Angebot": {
                               "Absender": $Absender,
                               "AbsenderEmail": $AbsenderEmail,
                               "Kunde": $KundeFeld,
                               "KundeAnsprache": $AnspracheFeld                                                    
                               }

                       },
                   })
                   location.reload();
           });
</script>

    upload.php:

    PHP-Code:
    <?php
    $neu     = ($_POST);
    $file = file_get_contents('angebot.json');
    $data = json_decode($file);
    unset(    $file);
    $data[] = $neu;
    file_put_contents('angebot.json',json_encode($data));
    unset(    $data);
    ?>
    Stichworte: -
  • #2
    Jetzt möchte ich noch ein File Upload integrieren und da stocke ich.
    Ich habe das über die FileReader api gemacht, finde nur sehr unsortierten code

    HTML-Code:
    var files = evt.dataTransfer.files; // FileList object.
    var file = files[files.length - 1];
      if (true) {

     var reader = new FileReader();

       reader.onload = (function(f) {
        return function(e) {

        var data = {name: f.name,
            modified: f.lastModifiedDate,
            size: f.size,
            data:  e.target.result,
            type: f.type
            };
           $.ajax({
        url: document.URL + 'file',
        data: data,
        type: 'POST',
        dataType: 'json',
        xhr: function () {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
               // update progress

               $('.progress-meter').each(function(){

            $(this).find('p').each(function(){

              $(this).html(Math.round(percentComplete * 100) + '%');
            });
            var width = $('#pg').width();
             $(this).width(percentComplete * width);

             if (percentComplete == 1) {
              $(this).width(0);
               $('#waiting').html('waiting sucks');

             }

               });
            }
          }, false);
         return xhr;
        }
    dazu noch ewig alt

    Kommentar

    • #3
      Dann hab ich schon mal einen Anhaltspunkt danke!

      Kommentar

      • #4
        Mit FormData kannst du Dateien und anderweitige Werte gleichzeitig per Ajax übertragen.
        [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

        Kommentar

        Vorherige Weiter
        Lädt...
        X