web-dev-qa-db-fra.com

Passer une image à travers AJAX

En gros, je souhaite transmettre un fichier image avec ajax lors de la soumission d'un formulaire, récupérer l'image et l'envoyer par courrier électronique en tant que pièce jointe:

Voici le formulaire :

<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>

Je n'arrive pas à trouver quelle est l'erreur dans mon code! Voici l'appel AJAX :

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');
          }
        }
      });
     });

Et voici le ajax.php :

<?php
if( isset($_POST['module']) && $_POST['module'] == "ajax_data_form" )
{
     var_dump($_FILES);
}
javascriptphpjqueryajaxfile-upload
16
user3350731
$.ajax({
    type: "POST",
    url: pathname,
    data: new FormData($('#devis')[0]),
    processData: false,
    contentType: false,
    success: function (data) {
        $("#divider").html(data);
    }
});

et obtenir les données du fichier normalement dans $_FILES[];

11
karthikeyan ganesan

pouvez-vous l'essayer 

<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>

Dans ajax.php

ecrivez 

 echo 'something';
2
punitha subramani v

Comme vous le savez peut-être déjà, il n'est pas possible de traiter les envois de fichiers via des appels ajax. Cela sera possible une fois que HTML5 FILE I/O Api sera prêt et mis en œuvre par les principaux navigateurs.

Vous pouvez utiliser le plugin post-formulaire jQuery iframe pour publier des données dans iframe afin que l'expérience utilisateur soit similaire à un appel ajax (mise à jour partielle de la page).

Voici le lien: https://github.com/dogzworld/iframe-post-form

Description: "Ce plug-in jQuery ajax upload crée une iframe cachée et définit l'attribut cible du formulaire à publier dans cette iframe. Lorsque le formulaire est soumis, il est posté (y compris les téléchargements de fichiers) dans l'iframe caché. la réponse du serveur de l'iframe ".

Comme mentionné, vous pouvez envoyer une réponse du serveur et afficher les mises à jour sur votre page Web en conséquence ... Il doit y avoir une page de démonstration, mais elle ne fonctionne pas pour le moment.

Vous pouvez également l'utiliser pour les téléchargements de fichiers.

Exemple d'appel:

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

Utilisation d'un plugin Jquery appelé plugin Jquery Form appelé Link

Je suggère de simplement soumettre le formulaire en utilisant jQuery et quelles que soient les données que vous voulez, vous pouvez les conserver dans des champs cachés.

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

Vous pouvez facilement obtenir le fichier dans la page php comme ceci 

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

etc.....

0
Yunus Aslam