AJAX图片上传FormData问题答案

【问题标题】：AJAX image upload FormData issueAJAX图片上传FormData问题
【发布时间】：2018-05-03 12:07:09
【问题描述】：

我正在尝试使用 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>

对于脚本，我使用 jquery 的 ajaz 方法。

<!-- 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");
    });

});
});

我做错了什么？

【问题讨论】：

标签： php jquery ajax html image

【解决方案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...
    }        
});

看看它是否适合你。

【讨论】：