Pasar una imagen a través de AJAX [duplicate]

Básicamente, quiero pasar un archivo de imagen con ajax al enviar un formulario y recuperar la imagen y enviarla por correo electrónico como un archivo adjunto:

Aquí esta la forma :

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

¡Parece que no puedo encontrar cuál es el error en mi código! Aquí esta la Llamada 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');
          }
        }
      });
     });

Y aquí está el 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);
    }
});

y obtener los datos del archivo normalmente en $_FILES[];. Porque FormData se encarga automáticamente de la multipart encabezado en una solicitud ajax.

puedes intentarlo

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

En ajax.php

solo escribe

 echo 'something';

Como ya sabrá, no es posible procesar la carga de archivos a través de llamadas ajax, será posible una vez API de E/S de ARCHIVO HTML5 está listo e implementado por los principales navegadores.

Puede usar el complemento jQuery iframe post form para publicar datos en iframe para que la experiencia del usuario sea similar a la llamada ajax (actualización parcial de la página).

Aqui esta el link:
https://github.com/dogzworld/iframe-post-forma

Descripción: “Este complemento de carga jQuery ajax crea un iframe oculto y establece el atributo de destino del formulario para publicar en ese iframe. Cuando se envía el formulario, se publica (incluidas las cargas de archivos) en el iframe oculto. Finalmente, el complemento recopila el la respuesta del servidor del iframe”.

Como se mencionó, puede enviar una respuesta desde el servidor y mostrar actualizaciones en su página web en consecuencia. Tiene que haber una página de demostración, pero no funciona a partir de ahora.

También puede usarlo para cargar archivos.

Ejemplo de llamada:

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

Uso de un complemento de Jquery llamado complemento de formulario de Jquery Enlace

Sugeriría simplemente enviar el formulario usando jquery y cualquier información que desee puede mantenerla en campos ocultos.

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

Puede obtener fácilmente el archivo en la página php de esta manera

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

etcétera…..