通过AJAX后发送文件，表单数据一起 [英] Sending file together with form data via ajax post

问题描述

我试图用一种形式的某些字段上传通过AJAX的文件时。然而，这是行不通的。我得到这个错误。

  

未定义指数： - 文件

下面是我的code。

HTML

 ＆LT;！ - 文件按钮 - ＆GT;
    ＆LT; D​​IV CLASS =形组＆GT;
    ＆LT;标签类=COL-MD-4控制标签为=文件＆GT;上载软件/文件＆LT; /标签＆gt;
    ＆LT; D​​IV CLASS =COL-MD-4＆GT;
    ＆LT;输入ID =文件名称=文件级=输入文件类型=文件＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

＆LT; D​​IV CLASS =形组＆GT;
＆LT;标签类=COL-MD-4控制标签为=价格＆GT;价格（$）＆LT; /标签＆gt;
＆LT; D​​IV CLASS =COL-MD-4＆GT;
＆LT;输入ID =价格NAME =价格型=文本占位符=价格级=的形式控制输入-MD需要=＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

阿贾克斯

  $（＃add_product）。点击（函数（五）{
    即preventDefault（）;
    PRODUCT_NAME = $（PRODUCT_NAME）VAL（）。
    // D = $（＃add_new_product）序列化（）。
    $阿贾克斯（{
        键入：POST，
        网址：'ajax.php，
        数据：$（＃add_new_product）序列化（）。
        成功：函数（响应）
        {
            //
            警报（响应）;

        }
    }）
}）;
 

PHP

 如果（0℃，$ _FILES ['文件'] ['错误']）
{
 回声 ：！;
}
其他
{
回声ASA;
}
 

我是什么在这里失踪？

解决方案

您可以使用FORMDATA

$（＃add_product）。点击（函数（五）{     即preventDefault（）;     VAR FDATA =新FORMDATA（）         fdata.append（PRODUCT_NAME，$（PRODUCT_NAME）VAL（））;        如果（$（＃文件）[0] .files.length大于0）        fdata.append（文件，$（＃文件）[0] .files [0]）     // D = $（＃add_new_product）序列化（）。     $阿贾克斯（{         键入：POST，         网址：'ajax.php，         数据：FDATA，         的contentType：假的，         过程数据：假的，         成功：函数（响应）         {             //             警报（响应）;         }     }） }）;

＆LT;！ - 文件按钮 - ＆GT;     ＆LT; D​​IV CLASS =形组＆GT;     ＆LT;标签类=COL-MD-4控制标签为=文件＆GT;上载软件/文件＆LT; /标签＆gt;     ＆LT; D​​IV CLASS =COL-MD-4＆GT;     ＆LT;输入ID =文件名称=文件级=输入文件类型=文件＆GT;     ＆LT; / DIV＆GT;     ＆LT; / DIV＆GT; ＆LT; D​​IV CLASS =形组＆GT; ＆LT;标签类=COL-MD-4控制标签为=价格＆GT;价格（$）＆LT; /标签＆gt; ＆LT; D​​IV CLASS =COL-MD-4＆GT; ＆LT;输入ID =价格NAME =价格型=文本占位符=价格级=的形式控制输入-MD需要=＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

I'm trying to upload a file via ajax together with some fields in a form. However, it doesn't work. I get this error.

Undefined Index :- File

Here's my code.

HTML

    <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>

Ajax

$("#add_product").click(function(e){
    e.preventDefault();
    product_name = $("product_name").val();
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: $("#add_new_product").serialize(),
        success: function(response)
        {
            //
            alert(response);

        }
    })
});

PHP

if (0 < $_FILES['file']['error']) 
{
 echo ":!";
}
else 
{
echo "ASa";
}

What am I missing here?

解决方案

you can use FormData

$("#add_product").click(function(e){
    e.preventDefault();
    var fdata = new FormData()
    
   fdata.append("product_name",$("product_name").val());
  
    if($("#file")[0].files.length>0)
       fdata.append("file",$("#file")[0].files[0])
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data:fdata,
        contentType: false,
        processData: false, 
        success: function(response)
        {
            //
            alert(response);

        }
    })
});

 <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>

这篇关于通过AJAX后发送文件，表单数据一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！