AJAX проблема загрузки изображения FormData

Question

Я пытаюсь загрузить изображение, используя ajax, из формы, но консоль постоянно говорит мне, что данные пусты, я не знаю, что сделать, чтобы заставить FormData работать.

результат примерно такой

form.php?f3_file=:362 Uncaught ReferenceError: data is not defined
at Object.<anonymous> (form.php?f3_file=:362)
at u (jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
at k (jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)

Для формы я использую Materialize в качестве фреймворка CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form class="col s12" enctype="multipart/form-data" id="f3_form" action="upload.php" method="POST">
<div class="row">`enter code here``


        <div class="input-field col s6">
          <input placeholder="Name" id="f3_name" type="text" class="validate">
          <label for="sub_cat">name</label>
        </div>

        <div class="input-field col s4 offset-s1">
            <img id="f3_img_preview" class="responsive-img circle center-align hoverable" src="img/profile.png" style="height: 250px ; width:250px; position: absolute;">
        </div>
</div>

<div class="row">

        <div class="input-field col s6">
          <input type="text" id="f3_input2" class="autocomplete">
          <label for="autocomplete-input">Alcance</label>
        </div>



</div>        
<div class="row">

        <div class="input-field col s6">
          <input type="text" id="f3_pais">
          <label for="autocomplete-input">country</label>
        </div>

</div>  

<div class="row">



     <div class="input-field col s6">
        <div class="file-field input-field">
            <div class="btn blue darken-3">
                  <span><i class="material-icons">file_upload</i></span>
                    <input id="f3_file" name="f3_file" type="file"> 
             </div>
             <div class="file-path-wrapper">
             <input class="file-path validate" type="text" placeholder="Logo">
             </div>
        </div>
    </div>

Для скрипта я использую ajaz метод jquery.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){

$('#f3_form').on('submit', function(e) {
    e.preventDefault();

    var f3form = new FormData(this);
    console.log(f3form);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: f3form,
        contentType: false,
        processData: false,
        success:function (data) {
            // body...
        }
    })
    .done(function() {
        console.log("eeeeexito"+ data);
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });

});
});

Что я обманываю неправильно?

Answer 1

Я заметил, что у вас есть jquery версия 2.1.1. Для ajax вы должны использовать

method: 'POST'

Изменения сделаны:

jQuery.ajax({
    type: 'POST', // For jQuery < 1.9
    method: 'POST',
    data: f3form
    cache: false,
    contentType: false,
    processData: false,
    success:function (data) {
        // body...
    }        
});

Посмотрите, работает ли это для вас.