javascript - jQuery AJAX - 在单个请求中将文件和变量发送到 PHP

Question

我有以下用于上传文件(图片)的 HTML 表单:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

我使用以下 JavaScript/jQuery 将表单数据和变量值发送到 PHP 脚本:

var variable1= 1;

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);

    $.ajax({
                url: 'upload.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, number: variable1},                         
                type: 'post',
                success: function(php_script_response){
                alert(php_script_response); // display response from the PHP script, if any
            }
    });
});

PHP 脚本 (upload.php) 如下所示:

$filename;
if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    $filename = $_FILES['file']['name'];
}
echo $filename;

当我运行这段代码时，PHP 抛出一些 undefined index 错误。如果我在 ajax 请求中只使用“data: form_data”(没有 variable1)，那么文件上传成功，但我也需要发送变量。我该怎么做？

Answer 1

您还可以将 number 键 => 值附加到表单数据中作为

form_data.append('number',  variable1);

然后在Ajax中调用

data: form_data,