Как отправить объекты FormData с Ajax-запросами в jQuery? [дубликат]

есть несколько еще не описанных методов, доступных для вас. Начните с установки свойства contentType в параметрах ajax.

основываясь на примере Прадика:

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

в некоторых случаях при принуждении jQuery ajax делать неожиданные вещи, то beforeSend событие является отличным местом, чтобы сделать это. Некоторое время люди использовали beforeSend чтобы переопределить тип mimeType до того, как он был добавлен в jQuery в 1.5.1. Вы должны быть в состоянии изменить почти все на jqXHR объект в событии перед отправкой.

вы можете отправить объект FormData в запросе ajax, используя следующий код,

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

Это очень похоже на принятый ответ, но фактический ответ на тему вопроса. Это автоматически отправит элементы формы в FormData, и вам не нужно вручную добавлять данные в переменную FormData.

метод ajax выглядит так,

$("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
        },
});

вы также можете вручную передать элемент формы внутри объекта FormData в качестве параметра вот так

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

надеюсь, что это помогает. ;)

Вы можете использовать $.ajax beforeSend событие для управления заголовком.

...

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

...

см. эту ссылку для получения дополнительной информации:http://msdn.microsoft.com/en-us/library/ms536752 (v=vs. 85). aspx

Я думаю, что вы не можете сделать это в ajax для поддержки всех браузеров, я мог бы сказать хорошо, чтобы проверить этот плагин AJAX uploader, чтобы увидеть, как они это сделали http://valums.com/ajax-upload/

Я делаю это так, и это работа для меня, я надеюсь, что это поможет :)

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

Если вы хотите отправить файлы с помощью ajax, используйте "jquery.форма.js" Это представляет все элементы формы легко.

образцы http://jquery.malsup.com/form/#ajaxSubmit

грубый вид :

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

    }

вместо - fd.append( 'userfile', $('#userfile')[0].files[0]);

использовать - fd.append( 'file', $('#userfile')[0].files[0]);

лучшая документация и пример, который я нашел, были здесь https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects