AJAX上传文件和文本不起作用答案

【问题标题】：AJAX upload file and text not workAJAX上传文件和文本不起作用
【发布时间】：2015-06-15 12:45:40
【问题描述】：

我正在使用此 ajax 代码提交表单并上传多个输入文件。我想通过 ajax 发送所有表单数据。文本输入成功发送，但文件输入未成功通过 ajax 发布！如何更改此代码？

$("#add_order").click(function () {

    //*****get data input
    var formData = new FormData(); 
        formData.append( 'action', 'add_order');
        formData.append( 'customer_name', $('input[name=customer_name]').val());
        formData.append( 'date', $('input[name=date]').val());
        formData.append( 'order_status', $('input:radio[name=order_stautus]').val());
        formData.append( 'total_price', $('input[name=totalprice]').val());
        formData.append( 'quits', $('input[name=quits]').val());
        formData.append( 'debt', $('input[name=debt]').val());
        formData.append( 'desc', $('#desc').val());
        formData.append( 'desc2', $('#desc2').val());

    $.each($("input[type=file]"), function(i, obj) {
        $.each(obj.files,function(j,file){
            formData.append('photo['+i+']', file);
        });
    });
    $.ajax({
        url: "includes/ajax/ajax.php",
        data: formData,
        processData: false,
        contentType: 'multipart/form-data',
        type: 'POST',
        dataType:'json',
        success: function(response){
           //load json data from server and output message     
           if(response.type == 'error'){ //load json data from server and output message     
               output = '<div class="alert alert-danger">'+response.text+'</div>';
           }else{
               output = '<div class="alert alert-danger">'+response.text+'</div>';
           }
           $("#results").append(output).slideDown();
        } 
    });        
});

获取表单数据的PHP代码：

if($_POST['action']=='add_order'){

    $customer_id = 1;
    $date = $_POST['date'];
    $status = $_POST['order_status'];
    $total_price = $_POST['total_price'];
    $quits = $_POST['quits'];
    $debt = $_POST['debt'];
    $desc = $_POST['desc'];
    $desc2 = $_POST['desc2'];

    for($i=0; $i<count($_FILES['photo']['name']); $i++) {
        //Get the temp file path
        $tmpFilePath = $_FILES['photo']['tmp_name'][$i];

        //Make sure we have a filepath
        if ($tmpFilePath != ""){
          //Setup our new file path
          $newFilePath = "../../uploads/orders/" . $_FILES['photo']['name'][$i];

          //Upload the file into the temp dir
          if(move_uploaded_file($tmpFilePath, $newFilePath)) {

            //Handle other code here

          }
        }
      }

formData 控制台.log：

【问题讨论】：

"我想获取输入文件中的所有表单数据并上传文件。但不是上传文件！"请说清楚。这没有任何意义。
@JoshBjelovuk 问题已更正
我认为您在使用 ajax 发送对象之前缺少对对象进行字符串化。应该是这样的：JSON.stringify(formData)。你确定你的 JSON 在语法上是正确的吗？也许一些 console.log 可以提供帮助。
@MarcoMoschettini console.log 图片已添加到问题中。

标签： javascript php jquery ajax

【解决方案1】：

根据this，对于ajax文件上传，contentType必须设置为false。

也许尝试将所有文件命名为photo[] 而不是photo[n]，以让您的PHP 服务器处理数组转换。见http://php.net/manual/en/features.file-upload.multiple.php。

【讨论】：

您确定使用 AJAX 发送文件可以正常工作吗？？

【解决方案2】：

你必须使用 JSON.stringify:

$.ajax({
    type: 'post',
    data: {form_data: JSON.stringify(formData)},
    contentType: 'application/json',
    dataType: 'json'
});

您还需要指定“application/json”而不是“multipart/form-data”。您可以使用以下工具检查您的 json 字符串的格式是否正确：http://jsonlint.com/。

在 PHP 端，你必须像这样解码传入的数据：

json_decode($_POST[form_data]);

请注意，您的请求中的 dataType 指定了您希望从服务器接收的内容，而 contentType 是 您要发送的内容类型。

在您的 PHP 文件中，您必须根据 json 格式将响应编码为 json 格式：

echo json_encode($my_response);

编辑：以下是在 PHP 端访问 json 对象的一些提示：

<?php

$my_json = json_decode($_POST["form_data"]);
$action = $my_json["action"];

/*
 DO STUFF
*/

$response = array('error' => "My error");
if(/* all is correct */)
    $response = array('response' => "My response", 'id' => 3);

echo json_encode($response);

?>

【讨论】：

谢谢。我可以得到一个php示例代码吗？