Comment envoyer des objets FormData avec des requêtes Ajax en jQuery? [dupliquer]

il y a quelques techniques encore à être mentionnées disponibles pour vous. Commencez par définir la propriété contentType dans vos paramètres ajax.

Bâtiment sur pradeek exemple:

$('form').submit(function (e) {
    var data;

    data = new FormData();
    data.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',

        // This will override the content type header, 
        // regardless of whether content is actually sent.
        // Defaults to 'application/x-www-form-urlencoded'
        contentType: 'multipart/form-data', 

        //Before 1.5.1 you had to do this:
        beforeSend: function (x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("multipart/form-data");
            }
        },
        // Now you should be able to do this:
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });

    e.preventDefault();
});

dans certains cas, en forçant jquery ajax à faire des choses inattendues, l'événement beforeSend est un excellent endroit pour le faire. Pendant un certain temps, les gens utilisaient beforeSend pour outrepasser le mimeType avant que celui-ci soit ajouté dans jQuery en 1.5.1. Vous devriez être en mesure de Modifiez à peu près n'importe quoi sur l'objet jqXHR dans l'événement before send.

vous pouvez envoyer L'objet FormData dans la demande ajax en utilisant le code suivant,

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
});

c'est très similaire à la réponse acceptée, mais une réponse réelle pour le sujet de la question. Ceci soumettra automatiquement les éléments de formulaire dans FormData et vous n'avez pas besoin d'ajouter manuellement les données à la variable FormData.

la méthode ajax ressemble à ceci,

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
    //append some non-form data also
    formData.append('other_data',$("#someInputData").val());
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

vous pouvez également passer manuellement le formulaire élément à l'intérieur de l'objet FormData comme paramètre comme ceci

var formElem = $("#formId");
var formdata = new FormData(form[0]);

J'espère que ça aidera. ;)

, Vous pouvez utiliser le $.ajax beforeSend événement pour manipuler l'en-tête.

...

beforeSend: function(xhr) { 
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
}

...

voir ce lien pour plus d'informations: http://msdn.microsoft.com/en-us/library/ms536752 (v=vs 85).aspx

je pense que vous ne pouvez pas le faire en ajax pour prendre en charge tous les navigateurs, je pourrais dire bon de vérifier ce plugin Uploader ajax pour voir comment ils ont fait http://valums.com/ajax-upload/

je fais comme ça et c'est un travail pour moi, j'espère que cela aidera :)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>   

si vous voulez soumettre des fichiers en utilisant ajax utilisez" jquery.forme.js" Cette soumet tous les éléments de forme facilement.

échantillons http://jquery.malsup.com/form/#ajaxSubmit

vue imprenable:

<form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>

<script type="text/javascript">
function showResponseAfterAddPhoto(responseText, statusText)
{ 
    information= responseText;
    callAjaxtolist();
    $("#AddPhotoForm").resetForm();
    $("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');        
};

$(document).ready(function(){
    $('.add_new_photo_div').live('click',function(){
            var options = {success:showResponseAfterAddPhoto};  
            $("#AddPhotoForm").ajaxSubmit(options);
        });
});
</script>

JavaScript:

 function submitForm() {
                var data1 = new FormData($('input[name^="file"]'));
                $.each($('input[name^="file"]')[0].files, function(i, file) {
                data1.append(i, file);
                });

    $.ajax({
      url: "<?php echo base_url() ?>employee/dashboard2/test2",
      type: "POST",
      data: data1,
      enctype: 'multipart/form-data',
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
        console.log("PHP Output:");
        console.log( data );
    });
    return false;
}

PHP:

public function upload_file(){

    foreach ($_FILES as $key ) {

          $name =time().$key['name'];

          $path='upload/'.$name;

          @move_uploaded_file($key['tmp_name'],$path);

    }

au lieu de - fd.append( 'userfile', $('#userfile')[0].files[0]);

utilisation - fd.append( 'file', $('#userfile')[0].files[0]);

la meilleure documentation et l'exemple que j'ai trouvé était ici https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects