Question

＆＃13;

$('.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);
  }
})

＆＃13;

<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>

＆＃13;

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

Answer 1

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

＆＃13;

$('.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);
  }
})

＆＃13;

Answer 2

附加文件数据而不是此

$('.imageUp').change(function(e) {
  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', e.target.files[0]);
    console.log(formData);
  }
})

formdata通过ajax但得到了空对象

2 个答案: