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を経由してファイルを送信するための正しい方法ですが、これまでのところ、私はFORMDATAを見ていることで空であることを確認私のクロームのコンソール。

Answer 1

それはDOM要素であるとして、あなたはthisにフォームフィールドを設定することはできません。代わりに要素のキー値を取得する必要があります。

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

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); 
    } 
}) 

のファイルデータを追加