AJAX图像上传FormData问题

时间:2018-05-03 03:53:04

标签: php jquery ajax html5 image

我正在尝试使用表单中的ajax上传图像,但控制台一直告诉我数据是空的,我不知道如何使FormData工作。

结果是像这样的事情

SETs

对于表单,我使用Materialize作为CSS框架。

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)

对于脚本,我正在使用jquery的ajaz方法。

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

我错的是什么?

1 个答案:

答案 0 :(得分:0)

我注意到你有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...
    }        
});

看看它是否适合你。