javascript - 表单数据未通过 ajax 调用提交

Question

每次用户更改其个人资料图片时，我都需要进行 ajax 调用。我可以成功进行 ajax 调用，但问题是没有任何内容发送到服务器。

<form action="#" enctype='multipart/form-data' id="avatar-upload-form">
    <div class="form-group">
       <label class="btn btn-default btn-file btn-block">
              Upload new picture <input type="file" style="display: none;" name="profile_image" id="profile_image">
       </label>
    </div>
</form>

$('#profile_image').on('change', function() {
    var formData = new FormData("#avatar-upload-form");
    $.ajax({
        url: '/users/upload/avatar',
        type: 'POST',
        dataType: 'json',
        enctype: 'multipart/form-data',
        cache:false,
        processData: false,
        contentType: false,
        data: formData,
        success: function(data) {
           console.log(data);
        }, 
        error: function(error) {
           console.log(error);
        }
     })
});

PHP 代码

Route::post('/users/upload/avatar', function() {
   dd(Request::file('profile_image')); // return empty array
});

Answer 1

我自己解决这个问题。我只需要使用标准的 javascript 表单对象，如下所示:
document.getElementById('form_id')[0]