Übergeben Sie ein Bild über AJAX [duplicate]

Grundsätzlich möchte ich beim Absenden eines Formulars eine Bilddatei mit Ajax übergeben und das Bild abrufen und als Anhangsdatei per E-Mail senden:

Hier ist die form :

<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
        <div class="form-group">
            <label class="control-label col-md-4" for="societe">Company</label>
            <div class="col-md-8">
                <input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>
            <div class="col-md-8">
                <textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>
            </div>
        </div>
        <div class="form-group" id="input_file">
            <label class="control-label col-md-4" for="image_input_field">Logo</label>
            <div class="col-md-8">
            <div class="input-group uploaddiv">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Parcourir <input type="file" id="image_input_field" name="file">
                    </span>
                </span>
                <input type="text" class="form-control" readonly="">
            </div>
            </div>
        </div>
    <div class="form-group">
    <div class="form-actions col-md-9 col-md-offset-3 text-right">
        <input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit">
        <input type="reset" value="Annuler" name="" class="btn btn-default" id="reset">
        </div>
    </div>
    </fieldset>
</form>

Ich kann den Fehler in meinem Code nicht finden! Hier ist die AJAX-Aufruf :

jQuery(document).on("click", "#submit", function(e) {
      e.preventDefault();
      var fileInput = document.getElementById('image_input_field');
      var file = fileInput.files[0];
      var formData = new FormData();
      formData.append('file', file);
      // console.log(file);

      var societe = $("input#societe").val();
      var message = $("textarea#message").val();
      jQuery.ajax({
        url: "ajax.php",
        type: "post",
        data: {
           'file': file,
           'module' : 'ajax_data_form',
           'societe': societe,
           'message': message
        },
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);
            // console.log(reponse);
            // jQuery('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
     });

Und hier ist die ajax.php:

<?php
if( isset($_POST['module']) && $_POST['module'] == "ajax_data_form" )
{
     var_dump($_FILES);
}

$.ajax({
    type: "POST",
    url: pathname,
    data: new FormData($('#devis')[0]),
    processData: false,
    contentType: false,
    success: function (data) {
        $("#divider").html(data);
    }
});

und erhalten Sie die Dateidaten normalerweise in $_FILES[];. Weil FormData wird automatisch verarbeitet multipart Header in einer Ajax-Anfrage.

kannst du es versuchen

<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
  var fileInput = document.getElementById('image_input_field');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);
  // console.log(file);

  var societe = $("input#societe").val();
  var message = $("textarea#message").val();

      $.ajax({
        url: "ajax.php",
        type: "POST",
        data: "file="+file,
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);

            // console.log(reponse);
            // $('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
 }); });
</script>

In ajax.php

einfach schreiben

 echo 'something';

Wie Sie vielleicht bereits wissen, ist es nicht möglich, Datei-Uploads über Ajax-Aufrufe zu verarbeiten, dies wird einmalig möglich sein HTML5-DATEI-E/A-API ist bereit und wird von den wichtigsten Browsern implementiert.

Sie können das jQuery-Iframe-Post-Formular-Plugin verwenden, um Daten in Iframe zu posten, sodass die Benutzererfahrung ähnlich wie bei einem Ajax-Aufruf ist (teilweise Aktualisierung der Seite).

Hier ist der Link:
https://github.com/dogzworld/iframe-post-form

Beschreibung: „Dieses jQuery-Ajax-Upload-Plugin erstellt einen versteckten Iframe und legt das Zielattribut des Formulars so fest, dass es in diesem Iframe gepostet wird. Wenn das Formular gesendet wird, wird es (einschließlich der Datei-Uploads) in den versteckten Iframe gepostet. Schließlich sammelt das Plugin die Antwort des Servers vom Iframe.”

Wie bereits erwähnt, können Sie eine Antwort vom Server senden und entsprechende Aktualisierungen auf Ihrer Webseite anzeigen. Es muss eine Demoseite geben, aber sie funktioniert derzeit nicht.

Sie können es auch für Datei-Uploads verwenden.

Aufrufbeispiel:

jQuery('#frmId').iframePostForm({
    json : true,
    post : function () {
        //return true or false
        return true;
    },
    complete : function (response) {
        //complete event
        console.log(response);
    }
});

Verwenden eines Jquery-Plugins namens Jquery Form-Plugin Verknüpfung

Ich würde vorschlagen, das Formular einfach mit jquery zu übermitteln, und welche Daten Sie auch immer möchten, Sie können sie in versteckten Feldern aufbewahren.

$("#devis").ajaxSubmit(options); 
return false;

So können Sie die Datei ganz einfach auf der PHP-Seite abrufen

$ImageTempname  = $_FILES['ImageFile']['tmp_name'];
$ImageFilename  = $_FILES['ImageFile']['name'];
$ImageType      = $_FILES['ImageFile']['type'];

usw…..