如何使用 $.ajax() 进行输入字段文本和文件上传？ [复制]答案

【问题标题】：How to use $.ajax() for input field text AND FILE upload? [duplicate]如何使用 $.ajax() 进行输入字段文本和文件上传？ [复制]
【发布时间】：2014-11-19 02:11:49
【问题描述】：

这是我的代码

                        $.ajax({
                            type: 'post',
                            url: '../lib/upload.php',
                            data: new FormData( $("#niceidentifier") ),
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if(response == 'success') {
                                    return true;
                                }
                                else {
                                    alert(response);
                                    console.log(response);
                                }
                            }
                        });

HTML 表单只是基本的 HTML（包括 enctype 和方法发布），但不幸的是没有传递任何数据。如何上传文件并传递输入数据一次？

【问题讨论】：

@Kami 所以我必须为每个输入字段执行“form_data.append”？就算不是文件？
#niceidentifier 是表单的id？
@SebriZouhaier 不，这是表单的 ID

标签： javascript php jquery html ajax

【解决方案1】：

在同一个 POST 请求中一起传递文件和其他数据（例如文本）并不简单。实现这一目标的唯一方法是发出 multipart/form-data 请求。

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2

【讨论】：

【解决方案2】：

我使用ajaxForm通过ajax异步上传文件，比自己实现要容易得多。

http://malsup.com/jquery/form/

【讨论】：

【解决方案3】：

对于跨浏览器的解决方案，我认为最好使用

$("#form_id").ajaxSubmit();

【讨论】：

【解决方案4】：

您可以使用 FormData 来传递文件。并且 processData,contentType 强制设置为 false。因为你不会在客户端处理文件。

// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
        data.append('myFile', value);   //No I18N
});


$.ajax({
    url: '/your-url', 
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});

或者您可以发送包含以下数据的文件：

$( '#formId' )
  .submit( function( e ) {
 e.preventDefault();
 $.ajax({
    url: '/your-url', 
    type: 'POST',
    data: new FormData( this ),
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});
});

【讨论】：

而PHP脚本如何获取我的输入类型文本内容？
@user3613095 我对 php 不太熟悉，但我认为您可以使用 $_FILES['myFile']['tmp_name'] 访问它。你可以阅读它w3schools.com/PHP/php_file_upload.asp
我收到了 FILE，但我没有收到我的表单中的 20 个 TEXT、SELECT 和 RADIO FIELDS。
@user3613095 您还需要附加这些值。喜欢data.append('name', some-value);
这不能自动发生吗？ @克里耶塔？我的表单更复杂，它可以在字段类型之间变化...