javascript - 通过ajax的formdata，但得到空对象

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为空。

最佳答案

您不能将表单字段设置为this，因为它是DOM元素。您需要检索元素的键值。

$('.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.files[0]);
    console.log(formData);
  }
})