通过ajax获得了formdata，但对象为空

Question

https://jsfiddle.net/y8mm4u9o/

​

$('.imageUp').change(function() {
  var ext = $(this).val().replace(/^.*\./, '').toLowerCase();

  if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
    alert('Only Image can be Upload!');
  } else {
    var formData = new FormData();
    formData.append('file', this);
    console.log(formData);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photo-picker">
  <div class="camera">
    <div class="lens"></div>
    <div class="grip"></div>
    <div class="moc"></div>
    <input type="file" class="imageUp" />
  </div>
  <div class="preview-card"><img src="" class="preview" /><span class="photo-title"></span></div>
</div>

​

我不确定这是不是通过ajax将文件发送到服务器的正确方式，但到目前为止，我在chrome的控制台上看到formdata是空的。