Question

我写这篇文章是为了使用HTML中的input元素将图像上传到我的本地Apache网络服务器。 file被记录为非空，但为什么form_data完全为空？

$('#upload-image').change(function(e){
    var file = e.target.files[0];
    var imageType = /image.*/;
    if (!file.type.match(imageType))
        return;
    console.log(file);
    var form_data = new FormData();
    form_data.append('file', file);
    console.log(form_data);
    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });

});

这是我在本地网络服务器上的upload.php

<?php
    header('Access-Control-Allow-Origin: *');
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
        $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
        echo $target_path;
    }
?>

console.log(response)记录PHP文件的所有代码行，而不是echo的返回结果

Answer 1

当仅使用entries()记录formData对象时，它总是返回空，因为您无法记录formData。

如果您只是在发送之前必须记录它，您可以使用$('#upload-image').change(function(e) { var file = e.target.files[0]; var imageType = /image.*/; if (!file.type.match(imageType)) return; var form_data = new FormData(); form_data.append('file', file); for (var key of form_data.entries()) { console.log(key[0] + ', ' + key[1]); } $.ajax({ url: 'http://localhost/upload.php', cache: false, contentType: false, processData: false, data: form_data, type: 'POST', success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); });来获取formData对象中的条目

//EXAMPLE 2

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time)
  })
}

function onSignup() {
  this.authService.signupUser(this.signupForm.value)
  .then(response => {
     const userObject = {
       uid: response.auth.uid,
       email: response.auth.email
     }
     return userObject
   })
   .then(this.authService.saveNewUserInDatabase)
   .then(delay(5000))
   .then(() => {
     this.router.navigate(['/map'])
   })
   .catch(error => {
     console.log(error)
   });
}

Answer 2

我注意到自己contentType: false只适用于jQuery 1.7.0及更高版本。因此，请确保您使用正确的jQuery版本。

FormData附加不起作用

2 个答案: