使用 ajax 发送上传的文件和输入数据答案

【问题标题】：send uploaded files and inputs data with ajax使用 ajax 发送上传的文件和输入数据
【发布时间】：2017-05-12 07:47:26
【问题描述】：

我正在尝试使用 ajax 上传带有数据的文件。这是我的 html 表单：

<body>
  <input type="text" id="name" value="test" />
  <input type="file" id="pic" accept="image/*" />
  <input id = "submit" type="submit" />
</body>

当我使用 ajax 单独发送上传的文件时，它正在使用 new FormData();

var file_data = $('#pic').prop('files');   
var form_data = new FormData();                  
form_data.append('file', file_data);
alert(form_data);                             
$.ajax({
            url: 'test.php', // point to server-side PHP script 
            dataType: 'text',  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
                alert(php_script_response); 
            }
 });

但我不知道如何使用数据发送输入“名称”

var DATA = 'name='+name;

$.ajax({
  url: "test.php",
  type: "post",
  data: DATA,
  success: function (response) {
    console.log($response);             
  },
});

谢谢

【问题讨论】：

只需在一个 ajax 上，您就可以使用 form_data.append('input_name', $('#name').val()); 将输入值添加到数据中

标签： javascript jquery html ajax

【解决方案1】：

首先你应该包含表单标签，比如下面的例子。

<form id="uploadForm" enctype="multipart/form-data" action="http://yourdomain.com/upload" method="post" name="uploadForm" novalidate>
    <input type="text" id="name" value="test" />
    <input type="file" id="pic" accept="image/*" />
    <input id = "submit" type="submit" />
</form>

然后您可以使用如下代码发送所有表单数据：

var form = $('#uploadForm')[0];
var form_data = new FormData(form);

要回答您关于仅发送 ID 为“名称”的文本字段的值的具体问题，只需使用以下行：

var DATA = 'name=' + $('#name').val();

【讨论】：

【解决方案2】：

var name = $("#name").val(); form_data.append('name', name); 也许是错的，请尝试

【讨论】：