web-dev-qa-db-de.com

Bild weitergeben AJAX

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

Hier ist das Formular :

<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 anscheinend nicht finden, was der Fehler in meinem Code ist! Hier ist der 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);
}
16
user3350731
$.ajax({
    type: "POST",
    url: pathname,
    data: new FormData($('#devis')[0]),
    processData: false,
    contentType: false,
    success: function (data) {
        $("#divider").html(data);
    }
});

und erhalte die Dateidaten normalerweise in $_FILES[];

11

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';
2

Wie Sie vielleicht bereits wissen, ist es nicht möglich, Datei-Uploads über ajax-Aufrufe zu verarbeiten. Es ist möglich, sobald HTML5 FILE I/O Api fertig ist und von den wichtigsten Browsern implementiert wird.

Sie können jQuery-Plugins für iframe post form verwenden, um Daten in iframe zu posten, sodass die Benutzererfahrung ähnlich wie bei ajax ist (teilweise Aktualisierung der Seite).

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

Beschreibung: "Dieses jQuery-Ajax-Upload-Plugin erstellt einen verborgenen Iframe und legt das Zielattribut des Formulars für die Veröffentlichung in diesem Iframe fest. Wenn das Formular gesendet wird, wird es (einschließlich der Dateiuploads) an den ausgeblendeten Iframe gesendet Antwort des Servers vom iframe. "

Wie bereits erwähnt, können Sie vom Server eine Antwort senden und entsprechend Updates auf Ihrer Webseite anzeigen. Es muss eine Demoseite vorhanden sein, die aber ab sofort nicht funktioniert.

Sie können es auch zum Hochladen von Dateien verwenden.

Aufrufbeispiel:

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

Verwenden eines Jquery-Plugins namens Jquery-Formular-Plugin Link

Ich würde vorschlagen, das Formular einfach mit Jquery zu übermitteln und die gewünschten Daten können in versteckten Feldern aufbewahrt werden.

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

Sie können die Datei auf diese Weise leicht auf der PHP-Seite finden 

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

und so weiter.....

0
Yunus Aslam